Date Time Picker

One type of drop-down in SpreadJS is Date Time Picker. This drop-down can be defined by the developer with JavaScript code, specifying whether to show the time with the year, month, and date or date range. The below spreadsheet shows the date time picker with different settings applied on cells in the workbook.

Drop-downs provide a developer 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. SpreadJS has 9 different kinds of drop-downs, and this demo shows how to use the Date Time picker. You can use DateTimePicker drop-down with the following code : There are also some options: showTime: boolean : Specific whether the calendar need to display time part. calendarPage: CalendarPage : Specify the default page, the value has Year, Month and Day. For example, calendarPage: GC.Spread.Sheets.CalendarPage.year. startDay: CalendarStartDay : Specify the start day of week, normally the start day is Monday or Sunday, , but a user can set any day as the start day. For example, startDay: GC.Spread.Sheets.CalendarStartDay.monday. showDateRange: boolean : Specific whether the calendar need to display as date range mode, default value is false. showBuiltInDateRange: boolean : Specific whether the calendar need to display build-in date range panel.
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(); // -------------------- Date Time Picker : showTime true --------------------- var showTimeStyle = new GC.Spread.Sheets.Style(); showTimeStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; showTimeStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: true } } ]; sheet.setText(1, 3, "Date Time Picker (showTime: true)"); sheet.setColumnWidth(3, 200); sheet.setStyle(2, 3, showTimeStyle); // -------------------- Date Time Picker : showTime False --------------------- let notShowTimestyle = new GC.Spread.Sheets.Style(); notShowTimestyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; notShowTimestyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: false } } ]; sheet.setText(20, 3, "Date Time Picker (showTime: false)"); sheet.setStyle(21, 3, notShowTimestyle); // -------------------- Date Time Picker : CalendarPage - Year --------------------- let calendarYearStyle = new GC.Spread.Sheets.Style(); calendarYearStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; calendarYearStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: true, calendarPage: GC.Spread.Sheets.CalendarPage.year, } } ]; sheet.setText(20, 6, "Date Time picker (calendarPage - Year)"); sheet.setColumnWidth(6, 200); sheet.setStyle(21, 6, calendarYearStyle); // -------------------- Date Time Picker : CalendarPage - Month --------------------- let calendarMonthStyle = new GC.Spread.Sheets.Style(); calendarMonthStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; calendarMonthStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: true, calendarPage: GC.Spread.Sheets.CalendarPage.month, } } ]; sheet.setText(1, 6, "Date Time picker (calendarPage - Month)"); sheet.setColumnWidth(6, 200); sheet.setStyle(2, 6, calendarMonthStyle); let rangeCalendarStyle = new GC.Spread.Sheets.Style(); rangeCalendarStyle.formatter = '=IF(ISBLANK(@), "", TEXT(@.start, "m/d/yyyy")&"~"&TEXT(@.end, "m/d/yyyy"))'; rangeCalendarStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; rangeCalendarStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showDateRange: true, } } ]; sheet.setText(1, 10, "Date Range picker"); sheet.setColumnWidth(9, 100); sheet.setText(3, 9, "Start Time:"); sheet.setFormula(3, 10, '=IF(ISBLANK(K3), "", TEXT(K3.start, "m/d/yyyy")'); sheet.setText(4, 9, "End Time:"); sheet.setFormula(4, 10, '=IF(ISBLANK(K3), "", TEXT(K3.end, "m/d/yyyy")'); sheet.setText(1, 10, "Date Range picker"); sheet.setColumnWidth(10, 200); sheet.setStyle(2, 10, rangeCalendarStyle); sheet.resumePaint(); spread.commandManager().execute({ cmd: "openDateTimePicker", row: 2, col: 10, sheetName: "Sheet1" }); // spread.commandManager().execute({cmd:"openDateTimePicker",row:2,col:11,sheetName:"Sheet1"}); // spread.commandManager().execute({cmd:"openDateTimePicker",row:21,col:11,sheetName:"Sheet1"}); // spread.commandManager().execute({cmd:"openDateTimePicker",row:21,col:5,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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }