v-text-field设置type为datetime-local时跨浏览器不兼容如何解决

Chrome对type="datetime-local"原生输入控件的绑定值格式校验非常严格，仅支持符合ISO规范的本地时间字符串，格式必须为YYYY-MM-DDTHH:mm（如需支持秒则为YYYY-MM-DDTHH:mm:ss），字符串不能带毫秒、Z时区标识，也不能用空格替换T分隔符。Firefox对非标准格式的容错性更高，所以会出现Firefox正常显示、Chrome下输入框空白/无法选中时间的表现不一致问题，核心是从数据库拿到的时间戳转成的绑定值不符合Chrome的格式要求。

• 对绑定到v-model的时间值做双向格式转换，不要把数据库返回的原始时间戳、带时区的UTC字符串、YYYY-MM-DD HH:mm:ss格式的字符串直接绑定到组件上
  1. 读取数据库时间赋值给表单时，先把时间值转成Chrome要求的无后缀、无时区的标准本地时间字符串
  2. 表单提交存库时，再把输入框返回的标准时间字符串转回后端要求的时间戳/时间格式
• 如果需要完全消除原生控件的浏览器差异，可以直接替换为Vuetify官方的v-datetime-picker组件封装时间选择功能，不用依赖浏览器原生的datetime-local实现，所有浏览器表现完全一致。

可直接复用的代码示例 #

用计算属性做双向绑定，自动处理格式转换，不需要额外改原有业务逻辑：

<template>
  <v-text-field
    type="datetime-local"
    :id="index"
    :data-name="name"
    v-model="localTime"
    @input="isSaveEditEnabled = true"
    outlined
    dense
  />
</template>

<script>
export default {
  props: {
    // 父组件传入的原始值，支持时间戳、ISO时间字符串格式
    value: {
      type: [Number, String],
      default: null
    }
  },
  computed: {
    localTime: {
      get() {
        if (!this.value) return ''
        const date = new Date(this.value)
        const padZero = (num) => String(num).padStart(2, '0')
        // 严格拼接符合规范的本地时间字符串，不要用toISOString避免时区偏移
        return [
          date.getFullYear(),
          padZero(date.getMonth() + 1),
          padZero(date.getDate())
        ].join('-') + 'T' + [
          padZero(date.getHours()),
          padZero(date.getMinutes())
          // 如需支持秒输入，新增 padZero(date.getSeconds()) 项即可
        ].join(':')
      },
      set(val) {
        // 用户修改时间后，转回时间戳抛出，和原有业务逻辑的时间格式保持一致
        this.$emit('input', val ? new Date(val).getTime() : null)
      }
    }
  }
}
</script>

避坑提示：格式化时间时不要直接调用date.toISOString().slice(0, 16)，该方法返回的是UTC时区时间，在东八区使用会和本地时间有8小时偏差，一定要用getFullYear、getHours这类获取本地时间的API手动拼接。

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