TimePicker

Theme:

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.

SpreadJS has 9 different kinds of drop-downs, and this demo shows how to use the Time Picker.

You can use the Time Picker drop-down with the following code :

    // The way of click the dropdown icon to open TimePicker.     
    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, 5, "Time Picker");
      sheet.setStyle(2, 5, timePickerStyle);

      // The way just open TimePicker with command rather then clicking the dropdown button.
      spread.commandManager().execute({cmd:"openTimePicker",row:2,col:5,sheetName:"Sheet1"});

There are also some option items for customizing the TimePicker:

max: ITimePickerValue : The maximum value the time picker can display, the value needs the hour, minute and second attributes.
min: ITimePickerValue : The minimum value the time picker can display, the value needs the hour, minute and second attributes.
step: ITimePickerValue : The granularity the time picker can step through values.
formatString: string : Specify the format of the time item.
height: number : Specify the container of the time picker's size.

Feedback

Submit and view feedback for

This Product This Page

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 Time Picker. You can use the Time Picker drop-down with the following code : There are also some option items for customizing the TimePicker: max: ITimePickerValue : The maximum value the time picker can display, the value needs the hour, minute and second attributes. min: ITimePickerValue : The minimum value the time picker can display, the value needs the hour, minute and second attributes. step: ITimePickerValue : The granularity the time picker can step through values. formatString: string : Specify the format of the time item. height: number : Specify the container of the time picker's size.

<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
function createPickerStyle(option) {
let 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: option
}];
return timePickerStyle;
}
function initSpread(spread) {
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setText(1, 3, "Time Picker");
sheet.setStyle(2, 3, createPickerStyle({
min: {
hour: 8
},
max: {
hour: 19
},
step: {
minute: 30
},
formatString: "h:mm AM/PM",
}));
sheet.setText(1, 7, "Time Picker");
sheet.setStyle(2, 7, createPickerStyle({
min: {
hour: 5
},
max: {
hour: 20
},
step: {
minute: 30
},
formatString: "h:mm:ss",
height: 350
}));
sheet.resumePaint();
spread.commandManager().execute({
cmd: "openTimePicker",
row: 2,
col: 3,
sheetName: "Sheet1"
});
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>

(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);