如何修复momentjs与vuejs-datepicker结合使用时的日期显示异常问题

两个问题会导致组件显示前一天日期：

• 时区解析偏差：vuejs-datepicker 接收横杠分隔的YYYY-MM-DD格式字符串时，会触发JS原生日期解析规则——这种格式默认按UTC时区解析，而你用moment生成该字符串是基于本地时区计算的。如果本地时区为UTC负时区（比如美国东部UTC-5），解析后的时间会落到本地时间的前一天，最终显示日期就和预期差1天。
• 变量名不匹配：你贴的代码里v-model绑定的变量是theDate，但data中定义、created钩子中赋值的变量是myDate，二者不统一会导致赋值根本没有绑定到组件上。

选择任意一种方案即可解决问题：

方案1：直接传日期对象（最稳妥，无时区问题） #

不要提前把日期格式化成字符串，直接传原生Date对象或者moment实例给v-model，格式化展示完全交给组件的format属性处理即可，从根源避免时区解析偏差。

<template>
  <!-- v-model绑定的变量名要和data里的定义完全一致 -->
  <datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
</template>

<script>
export default {
  data() {
    return {
      theDate: null
    }
  },
  created() {
    // 直接传原生Date对象，不需要提前做format处理
    this.theDate = new Date()
    // 如果用moment的话，转成原生Date对象再传即可：this.theDate = this.$moment().toDate()
  }
}
</script>

方案2：自定义解析规则，强制按本地时区解析字符串 #

如果业务要求必须传字符串格式的日期值，可以给组件传入自定义解析函数，把横杠分隔的日期替换成斜杠分隔——斜杠分隔的日期字符串JS会默认按本地时区解析，不会触发UTC自动转换问题。

<template>
  <datepicker
    v-model="theDate"
    format="yyyy-MM-dd"
    :parser="dateParser"
  ></datepicker>
</template>

<script>
export default {
  data() {
    return {
      theDate: null,
      dateParser: (dateStr) => new Date(dateStr.replace(/-/g, '/'))
    }
  },
  created() {
    this.theDate = this.$moment().format('YYYY-MM-DD')
  }
}
</script>

• 不要依赖字符串格式的日期做跨时区的日期赋值，原生Date对象是最稳妥的传值格式
• 写完先检查v-model绑定的变量名和data中定义、赋值的变量名完全一致，避免低级绑定错误

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