日期时间选择器

概述本 Demo 展示了如何为单元格配置日期时间选择器下拉菜单，通过设置不同的选项实现多种日期时间选择功能。Demo 中演示了 7 种配置场景：显示时间、仅显示日期、默认显示年份视图、默认显示月份视图、日期范围选择、设置默认日期时间、限制可选日期范围。实现思路创建样式对象，配置 cellButtons 添加下拉按钮设置 command 为 "openDateTimePicker"，指定下拉类型为日期时间选择器在 dropDowns 数组中配置日期时间选择器的选项（showTime、calendarPage、showDateRange 等）将样式应用到目标单元格可通过命令管理器以编程方式打开选择器代码解析配置带时间的日期时间选择器这段代码创建了一个带时间选择的日期时间选择器。cellButtons 配置下拉按钮，command 设置为 "openDateTimePicker" 打开日期时间选择器。dropDowns 数组中 showTime: true 表示显示时间部分。配置仅显示日期的选择器当 showTime 设置为 false 时，选择器只显示日期部分，不显示时间。配合 formatter 格式化单元格显示为日期格式。配置日历默认显示页面 calendarPage 选项控制日历默认显示的视图层级。CalendarPage.year 打开时显示年份选择，CalendarPage.month 显示月份选择，默认为日期选择。配置日期范围选择器 showDateRange: true 启用日期范围选择模式。单元格返回包含 start 和 end 属性的对象。formatter 使用公式格式化显示日期范围。设置默认日期时间和限制日期范围 defaultDateTime 可以是 Date 对象（单个日期）或包含 start/end 的对象（日期范围）。minDate 和 maxDate 限制用户只能选择指定范围内的日期。通过编程方式打开日期时间选择器除了点击下拉按钮，还可以使用 commandManager().execute() 方法通过编程方式打开日期时间选择器，参数包括行号、列号和工作表名称。运行效果点击单元格右侧的下拉按钮，弹出日期时间选择器不同配置的单元格显示不同功能：部分包含时间选择，部分仅显示日期年份视图和月份视图会在打开时直接显示对应的视图层级日期范围选择器可以拖动选择起止日期，单元格显示格式化的日期范围默认日期时间单元格打开时自动选中预设的日期和时间限制日期范围的选择器，超出范围的日期不可选择 API 参考日期时间选择器配置选项（ICalendarOption）日期范围对象（ICalendarDateRange）

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.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.setColumnWidth(10, 200);
sheet.setStyle(2, 10, rangeCalendarStyle);
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);
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);
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" });
// 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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}

SpreadJS 在线示例