Google Sheet+Vuetify CRUD应用时间格式转换问题求助

问题根源 #

Google Sheets将时间存储为1899-12-30基准日期的时分秒偏移值，通过Google Apps Script返回时会转为完整的ISO日期字符串（如1899-12-30T02:46:50.000Z），但Vuetify的type="time"输入框需要的是HH:mm格式的字符串，导致显示异常。

解决方案：双向格式转换 #

需要在数据获取和数据提交两个环节分别处理格式转换：

1. 数据拉取时：将ISO日期转为HH:mm格式 #

当从Apps Script获取到数据后，遍历time类型字段，提取时分部分：

// 假设data是从后端获取的原始数据数组，fields是你的字段配置数组
data.forEach(item => {
  fields.forEach(fld => {
    if (fld.type === 'time' && item[fld.key]) {
      const date = new Date(item[fld.key]);
      // 格式化时分，补前导零
      item[fld.key] = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }
  });
});

2. 数据提交时：将HH:mm转回Google Sheets兼容格式 #

提交表单前，把输入的HH:mm字符串转回Sheet可识别的基准日期对象：

// 复制editedItem避免修改原数据
const submitData = {...this.editedItem};
fields.forEach(fld => {
  if (fld.type === 'time' && submitData[fld.key]) {
    const [hours, minutes] = submitData[fld.key].split(':');
    // 构造Sheet的基准日期，设置对应时分
    const sheetTime = new Date('1899-12-30T00:00:00Z');
    sheetTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    submitData[fld.key] = sheetTime;
  }
});
// 将submitData传给Apps Script的保存函数

替代方案：用计算属性绑定Vuetify输入框 #

如果不想修改原始数据，可以通过计算属性实现双向绑定的格式转换：

<div v-if="fld.type === 'time'">
  <v-text-field
    :value="getFormattedTime(editedItem[fld.key])"
    @input="setTimeValue(fld.key, $event)"
    :label="fld.label"
    type="time"
    :rules="fld.required ? [rules.required]:[]"
  ></v-text-field>
</div>

在Vue实例的methods中添加转换逻辑：

methods: {
  getFormattedTime(dateVal) {
    if (!dateVal) return '';
    const d = new Date(dateVal);
    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
  },
  setTimeValue(key, timeStr) {
    const [hours, minutes] = timeStr.split(':');
    const sheetTime = new Date('1899-12-30T00:00:00Z');
    sheetTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    this.editedItem[key] = sheetTime;
  }
}

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