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. The below spreadsheet shows the date time picker with different settings applied on cells in the workbook.

Drop-downs provide 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. SpreadJS now has 8 different kinds of drop-downs, and this demo shows how to use the Date Time Picker. You can use DateTimePicker drop-down like the following code : There are also some options: showTime: boolean : Specific whether the calendar need to display time part. calendarPage: CalendarPage : Specific the default page, the value has Year, Month and Day. For example, calendarPage: GC.Spread.Sheets.CalendarPage.year. startDay: CalendarStartDay : Specific the start day of week, normal the start day is monday or sunday, there user can set any day as it's start day. For example, startDay: GC.Spread.Sheets.CalendarStartDay.monday.
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, 2, "Date Time Picker (showTime: true)"); sheet.setStyle(2, 5, showTimeStyle); // -------------------- Date Time Picker : showTime False --------------------- var 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, 2, "Date Time Picker (showTime: false)"); sheet.setStyle(21, 5, notShowTimestyle); // -------------------- Date Time Picker : CalendarPage - Year --------------------- var 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, 8, "Date Time picker (calendarPage - Year)"); sheet.setStyle(21, 11, calendarYearStyle); // -------------------- Date Time Picker : CalendarPage - Month --------------------- var 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, 8, "Date Time picker (calendarPage - Month)"); sheet.setStyle(2, 11, calendarMonthStyle); sheet.resumePaint(); spread.commandManager().execute({cmd:"openDateTimePicker",row:2,col:5,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/@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; }