TimePicker

TimePicker is a drop-down in SpreadJS that can be defined in JavaScript code with the style properties. This drop-down shows a different selection of times, which the developer specifies in terms of minimum, maximum, and step. This gives developers the ability to add a simple time picker to their workbook, which can be useful for creating user input forms. An example of the two different ways to display the time in the TimePicker are shown in the spreadsheet below.

<p>Drop-downs provides developers the ability to add a drop-down menu with specific properties to cells in a workbook. These drop-down menus don't require any extra code other than simply specifying which one to use for the drop-down menu. </p> <p>SpreadJS now has 8 different kinds of drop-downs, and this demo shows how to use the TimePicker.</p> <p>You can use TimePicker drop-down like the following code :</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// The way of click the dropdown icon to open TimePicker. </span> <span class="hljs-keyword">var</span> timePickerStyle = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); timePickerStyle.cellButtons = [ { <span class="hljs-attr">imageType</span>: GC.Spread.Sheets.ButtonImageType.dropdown, <span class="hljs-attr">command</span>: <span class="hljs-string">"openTimePicker"</span>, <span class="hljs-attr">useButtonStyle</span>: <span class="hljs-literal">true</span>, } ]; timePickerStyle.dropDowns = [ { <span class="hljs-attr">type</span>: GC.Spread.Sheets.DropDownType.timePicker, <span class="hljs-attr">option</span>: { <span class="hljs-attr">min</span>: { <span class="hljs-attr">hour</span>: <span class="hljs-number">8</span> }, <span class="hljs-attr">max</span>: { <span class="hljs-attr">hour</span>: <span class="hljs-number">19</span> }, <span class="hljs-attr">step</span>: { <span class="hljs-attr">minute</span>: <span class="hljs-number">30</span> }, <span class="hljs-attr">formatString</span>: <span class="hljs-string">"h:mm AM/PM"</span>, } } ]; sheet.setText(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>, <span class="hljs-string">"Time Picker"</span>); sheet.setStyle(<span class="hljs-number">2</span>, <span class="hljs-number">5</span>, timePickerStyle); <span class="hljs-comment">// The way just open TimePicker with command rather then clicking the dropdown button.</span> spread.commandManager().execute({<span class="hljs-attr">cmd</span>:<span class="hljs-string">"openTimePicker"</span>,<span class="hljs-attr">row</span>:<span class="hljs-number">2</span>,<span class="hljs-attr">col</span>:<span class="hljs-number">5</span>,<span class="hljs-attr">sheetName</span>:<span class="hljs-string">"Sheet1"</span>}); </code></pre> <p>There are also some option items for customizing the TimePicker:</p> <ul> <li><strong>max: ITimePickerValue</strong> : The maximum value the time picker can display, the value need hour, minute and second attribute.</li> <li><strong>min: ITimePickerValue</strong> : The minimum value the time picker can display, the value need hour, minute and second attribute.</li> <li><strong>setp: ITimePickerValue</strong> : The granularity the time picker can step through values. </li> <li><strong>formatString: string</strong> : Specific the format of the time item.</li> <li><strong>height: number</strong> : Specific the container of the time picker's size.</li> </ul>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); // -------------------- Time Picker --------------------- var timePickerStyle = new GC.Spread.Sheets.Style(); timePickerStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openTimePicker", useButtonStyle: true, } ]; timePickerStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.timePicker, option: { min: { hour: 8 }, max: { hour: 19 }, step: { minute: 30 }, formatString: "h:mm AM/PM", } } ]; sheet.setText(1, 3, "Time Picker"); sheet.setStyle(2, 3, timePickerStyle); // -------------------- Time Picker --------------------- var timePickerStyle = new GC.Spread.Sheets.Style(); timePickerStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openTimePicker", useButtonStyle: true, } ]; timePickerStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.timePicker, option: { min: { hour: 5 }, max: { hour: 20 }, step: { minute: 30 }, formatString: "h:mm:ss", height: 350 } } ]; sheet.setText(1, 7, "Time Picker"); sheet.setStyle(2, 7, timePickerStyle); sheet.resumePaint(); spread.commandManager().execute({cmd:"openTimePicker",row:2,col:3,sheetName:"Sheet1"}); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }