Nuxtjs/Vuejs中如何为datetime-local输入框设置当前时间为默认值

问题核心原因 #

datetime-local 类型的输入框要求绑定值必须是 YYYY-MM-DDTHH:mm 格式的字符串，你当前直接绑定 Date 对象，Vue 不会做隐式格式转换，所以无法被输入框识别。AngularJS 对该类型输入做了自动转换兼容，所以相同逻辑在 AngularJS 中可以生效。

修复方案 #

1. 时区兼容处理（可选，推荐）

如果需要显示本地时区的当前时间，避免UTC时区差问题，可以先写一个格式化方法：

function formatDatetimeLocal(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day}T${hours}:${minutes}`
}

2. 修改JS代码

export default {
 data(){
  return {
   formData:{
    // 初始化直接转换为符合要求的字符串格式
    eventtimeSpecific: formatDatetimeLocal(new Date()),
   }
  }
 },
  mounted () {
    const today = new Date()
    today.setHours(today.getHours(), today.getMinutes(), 0, 0)
    // 修改值时同样需要转成指定格式字符串
    this.formData.eventtimeSpecific = formatDatetimeLocal(today)
  },
}

如果你不需要处理时区差异，也可以直接用简化写法替换格式化方法：

eventtimeSpecific: new Date().toISOString().slice(0, 16)

3. HTML代码无需修改

保持原有代码即可：

<input v-model="formData.eventtimeSpecific" type="datetime-local" class="form-control" title="Set Specific Event Time">

补充说明 #

如果需要支持秒级精度，可以将格式化逻辑调整为输出到秒的 YYYY-MM-DDTHH:mm:ss 格式，同时给输入框添加 step="1" 属性。

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