一个单元格放置两个日期选择器：用 SpreadJS CellButtons 录入日期范围

很多表格字段天然是一组值，而不是一个值。比如"开始日期和结束日期""计划日期和实际日期""生效日和失效日"。如果拆成两列，表格会变宽；如果让用户手输一个字符串，又容易格式不统一。一个单元格放置两个日期选择器（jquery-ui） 这个 demo 给了一个折中方案：在同一个 SpreadJS 单元格里放两个按钮，分别弹出 jQuery UI Datepicker，把两个日期写回同一个单元格。

为什么这个细节重要

日期输入是高频动作，也是错误高发点。用户手动输入时可能出现分隔符不一致、月份日期顺序混乱、缺少结束日期等问题。产品上，单元格按钮能把"这个字段可操作"的信号直接放到表格里；开发上，它又比完全自定义 CellType 更轻量，适合把外部控件接到某个单元格。

demo 的交互很直观：A1 单元格有"按钮1"和"按钮2"。点击第一个按钮选择第一个日期，点击第二个按钮选择第二个日期。最终单元格值用空格分隔，例如两个日期组成一个简单的日期范围。

这种设计还保留了表格的紧凑性。用户不用在左右两列之间来回移动，字段关系也不会被宽表稀释。

SpreadJS 的实现思路

核心是 GC.Spread.Sheets.Style 的 cellButtons 属性。每个按钮都有自己的 command 回调，回调参数里能拿到 sheet、row、col。代码通过 sheet.getCellRect(row, col) 获取单元格位置，再创建一个绝对定位的 input，交给 jQuery UI Datepicker 显示。

JavaScript 复制代码

let style = new GC.Spread.Sheets.Style();

style.cellButtons = [{
  caption: "按钮1",
  command: function (sheet, row, col) {
    currentCell = { row, col, index: 0 };
    showDatepicker(sheet.getCellRect(row, col));
  }
}, {
  caption: "按钮2",
  command: function (sheet, row, col) {
    currentCell = { row, col, index: 1 };
    showDatepicker(sheet.getCellRect(row, col));
  }
}];

spread.getActiveSheet().setStyle(0, 0, style);

currentCell.index 是这个 demo 的小机关：它记录这次点击要改第几个日期。Datepicker 的 onSelect 回调拿到日期后，读取单元格当前值，按空格拆成数组，把新日期写入对应位置，再 join(" ") 写回单元格。弹窗定位则使用 getCellRect 加上宿主元素的 getBoundingClientRect()，让日期选择器贴近当前单元格。

可以扩展到哪些场景

这个方案适合日期范围、双版本生效日期、预计和实际完成日期、两个审批节点时间等字段。它还可以改成三按钮、多按钮，或把存储格式从空格分隔改成 JSON 字符串、对象 tag、隐藏列，方便后续提交给服务端。

需要注意，demo 为了展示重点，使用了页面级变量保存当前单元格和 input。生产环境建议封装清理逻辑，处理滚动、缩放、窗口 resize，以及开始日期不能晚于结束日期这类业务校验。

给开发者的关键词

SpreadJS、Style.cellButtons、command(sheet,row,col)、getCellRect、setStyle、jQuery UI Datepicker、onSelect、单元格多值输入、JavaScript 电子表格控件。

小结

这个 demo 展示了 SpreadJS 与第三方 UI 控件结合的一种轻量方式。单元格仍然是表格的一部分，但按钮把复杂输入拆成两个明确动作，让日期范围录入更直观，也让开发者保留了足够的格式控制空间。