概述
本 Demo 展示了如何为单元格配置时间选择器下拉菜单。Demo 中演示了两种不同的时间选择器配置：第一个设置了工作时间范围（8:00-19:00）并以 AM/PM 格式显示，第二个设置了更大的时间范围（5:00-20:00）并以 24 小时制格式显示。
实现思路
创建辅助函数 createPickerStyle 用于生成时间选择器样式，接收配置参数
在样式配置中设置 cellButtons，添加下拉按钮并将命令设置为 openTimePicker
在样式配置中设置 dropDowns，指定时间选择器类型和选项（时间范围、步长、格式等）
将样式应用到指定单元格
通过命令管理器以代码方式打开第一个时间选择器
代码解析
创建时间选择器样式的辅助函数
这个函数封装了时间选择器样式的创建逻辑。cellButtons 数组中配置了下拉按钮，command 属性设置为 "openTimePicker" 表示点击按钮时打开时间选择器。dropDowns 数组配置了时间选择器的类型和选项，option 参数由调用者传入。
配置并应用时间选择器样式
这两个配置展示了时间选择器的灵活定制能力：
min 和 max：设置可选时间范围
step：设置时间步长（这里为 30 分钟）
formatString：设置时间显示格式（AM/PM 或 24 小时制）
height：设置下拉面板高度
通过代码打开时间选择器
除了点击下拉按钮，还可以通过命令管理器以编程方式打开时间选择器。这种方式适用于需要根据业务逻辑自动打开选择器的场景。
运行效果
第 2 行第 3 列的单元格显示第一个时间选择器，可选择 8:00-19:00 之间的时间，以 AM/PM 格式显示
第 2 行第 7 列的单元格显示第二个时间选择器，可选择 5:00-20:00 之间的时间，以 24 小时制格式显示，面板高度更大
点击单元格右侧的下拉按钮即可打开时间选择器面板
页面加载时，第一个时间选择器会自动打开（通过代码触发）
API 参考
openTimePicker 命令
cmd：命令名称，固定为 "openTimePicker"
sheetName：工作表名称
row、col：单元格位置
时间选择器选项（ITimePickerOption）
min：可选最小时间，包含 hour、minute、second 属性
max：可选最大时间，包含 hour、minute、second 属性
step：时间步长，包含 hour、minute、second 属性
formatString：时间显示格式字符串
height：下拉面板高度，默认为 300
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function createPickerStyle(option) {
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: option
}
];
return timePickerStyle;
}
function initSpread(spread) {
var 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"});
}
<!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;
}
