Excel JS中如何让编辑栏仅显示时分格式(h:mm)而非完整日期？

问题背景 #

使用Excel JS构建计时表格时，设置numFmt: 'h:mm'后单元格能正常显示时分格式，但编辑栏仍会展示完整的日期时间。相关代码片段：

time: new Date(moment.utc().hours(h).minutes(m).seconds(0))

{ key: 'time', width: 7, style: { numFmt: 'h:mm' } },

核心原因 #

Excel的日期时间本质是序列化数值：整数部分对应日期（从1900年1月1日起的天数），小数部分对应一天内的时间占比。当前传入的是包含日期部分的Date对象，单元格格式仅隐藏了日期显示，但编辑栏会读取原始的完整日期时间值。

解决方法 #

1. 直接传入Excel时间数值（推荐） #

放弃Date对象，计算时间对应的小数数值（一天的比例），Excel会识别为纯时间，编辑栏也只会显示时分：

// 计算h小时m分钟对应的时间数值：总分钟数 / 一天的总分钟数(1440)
time: (h * 60 + m) / 1440,
{ key: 'time', width: 7, style: { numFmt: 'h:mm' } },

2. 限定Date对象为当天起始时间（编辑栏仍可能显示日期） #

如果必须使用Date对象，将日期部分固定为当天0点，同时使用精准格式：

const targetTime = new Date();
targetTime.setHours(h, m, 0, 0); // 重置时分秒，日期保留当天
time: targetTime,
{ key: 'time', width: 7, style: { numFmt: 'h:mm' } },

注：这种方式下编辑栏仍可能显示日期（如2024/5/20 14:30），因为底层还是日期对象，仅单元格隐藏了日期部分。

3. 存储为文本（不推荐，无法参与时间计算） #

若无需时间参与计算，直接生成时分字符串：

// 补零确保格式统一
time: `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`,
{ key: 'time', width: 7 }, // 无需设置numFmt

内容的提问来源于stack exchange，提问作者Zlatika