Vue.js中datetime转date后无法在date类型input框显示如何解决

• 你只在data初始化阶段对date_created做了split处理，但editItem方法里直接把接口返回的完整ISO时间字符串（带T、时间后缀、Z时区标识）赋值给了绑定值，完全没做格式化。<input type="date">仅支持YYYY-MM-DD格式的字符串作为值，不符合格式就会显示空白。
• 直接用split('T')[0]本身也有隐患：接口返回的是UTC标准时间，硬截断字符串不会做时区转换，东八区、西五区等非UTC时区的用户，遇到时间点靠近0点的情况会出现日期差1天的问题。

1. 修正data初始化逻辑，不要提前对未定义的this.date_created做转换，初始值设为空字符串即可：

data(){
  return {
    date_created: '',
    society: [],
    loadTable: false
  }
},

2. 新增通用日期格式化方法，专门处理接口返回的时间，输出符合date输入框要求的格式，同时自动适配本地时区：

methods: {
  formatToInputDate(isoTime) {
    if (!isoTime) return ''
    const date = new Date(isoTime)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  },
  editItem (item) {
    // 赋值前必须走格式化，不能直接塞原始接口值
    this.date_created = this.formatToInputDate(item.society_date_created)
    this.dialog = true
  },
},

3. 如果页面初始化加载时就需要显示默认日期，在axios请求的回调里拿到数据后，同样调用格式化方法给date_created赋值即可，不要直接塞原始时间串。

created: function(){
  axios.get(process.env.VUE_APP_Back+"/societies")
    .then(response => {
      this.society = response.data;
      // 初始化需要显示日期时打开下面注释
      // if (this.society.length) {
      //   this.date_created = this.formatToInputDate(this.society[0].society_date_created)
      // }
    })
    .catch(error => {
      this.society = error.data;
    });
  this.loadTable= false;
},

模板部分不需要修改，保持原有v-model绑定即可正常显示。

<input class="form-control" type="date" v-model="date_created" disabled>

• 所有给date_created赋值的入口，都必须走格式化逻辑，漏任意一处都会出现显示异常。
• 不要依赖字符串截断处理时间，只要涉及时区、多地域用户访问的场景，必须用Date对象做本地时间转换后再拼接格式，避免出现日期偏差。

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