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. defaultDateTime: Date | GC.Spread.Sheets.ICalendarDateRange : Specify the default selected date and time for the calendar. When showDateRange is true, it represents the default selected date range. minDate: Date : Represents the minimum date that can be selected in the calendar. maxDate: Date : Represents the maximum date that can be selected in the calendar.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { hostStyle = { width: '100%', height: '100%', overflow: 'hidden', float: 'left' }; initSpread($event: any) { let spread = $event.spread; let sheet = spread.getSheet(0); sheet.suspendPaint(); // -------------------- Date Time Picker : showTime true --------------------- let 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.formatter = 'm/d/yyyy'; 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(10, 3, "Date Time Picker (showTime: false)"); sheet.setStyle(11, 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(10, 6, "Date Time picker (calendarPage - Year)"); sheet.setColumnWidth(6, 200); sheet.setStyle(11, 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); // -------------------- Date Time Picker : defaultDateTime1 --------------------- const defaultDateTimeStyle = new GC.Spread.Sheets.Style(); defaultDateTimeStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; defaultDateTimeStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: true, defaultDateTime: new Date('2024/5/6 14:30:00') } } ]; sheet.setText(19, 3, "Date Time Picker (defaultDateTime)"); sheet.setStyle(20, 3, defaultDateTimeStyle); // -------------------- Date Time Picker : defaultDateTime2 --------------------- let defaultDateRangeStyle = new GC.Spread.Sheets.Style(); defaultDateRangeStyle.formatter = '=IF(ISBLANK(@), "", TEXT(@.start, "m/d/yyyy")&"~"&TEXT(@.end, "m/d/yyyy"))'; defaultDateRangeStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; defaultDateRangeStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showDateRange: true, defaultDateTime: { start: new Date('2017/9/10'), end: new Date('2021/7/7') } } } ]; sheet.setText(19, 6, "Date Range picker(defaultDateTime)"); sheet.setColumnWidth(5, 100); sheet.setText(21, 5, "Start Time:"); sheet.setFormula(21, 6, '=IF(ISBLANK(G21), "", TEXT(G21.start, "m/d/yyyy")'); sheet.setText(22, 5, "End Time:"); sheet.setFormula(22, 6, '=IF(ISBLANK(G21), "", TEXT(G21.end, "m/d/yyyy")'); sheet.setStyle(20, 6, defaultDateRangeStyle); // -------------------- Date Time Picker : defaultDateTime1 --------------------- const defaultDateLimitedStyle = new GC.Spread.Sheets.Style(); defaultDateLimitedStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openDateTimePicker", useButtonStyle: true, } ]; defaultDateLimitedStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.dateTimePicker, option: { showTime: true, minDate: new Date('2018/5/25'), maxDate: new Date('2027/8/12') } } ]; sheet.setText(10, 10, "Date Time Picker (minDate & maxDate)"); sheet.setStyle(11, 10, defaultDateLimitedStyle); sheet.resumePaint(); spread.commandManager().execute({ cmd: "openDateTimePicker", row: 2, col: 10, sheetName: "Sheet1" }); } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> </gc-spread-sheets> </div>
.sample-tutorial { position: relative; width: 100%; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);