VueJS Datepicker日期格式问题：DD.MM.YYYY输入被误判无效

你只配置了自定义格式化函数来输出DD.MM.YYYY格式的日期，但没有指定对应的日期解析逻辑，组件默认仍按MM.DD.YYYY规则解析输入内容，导致像21.09.2022这样的日期被错误识别为月份21，进而判定为无效日期。

解决方法是同时配置组件的parseDate属性，自定义输入日期的解析规则，配合已有的formatter完成双向的格式匹配：

<template>
  <datepicker
    :formatter="customDatepickerFormatter"
    :parseDate="customDatepickerParser"
  ></datepicker>
</template>

<script>
import moment from 'moment';
import Datepicker from 'vuejs-datepicker';

export default {
  components: {
    Datepicker
  },
  methods: {
    customDatepickerFormatter(date) {
      return moment(date).format("DD.MM.YYYY");
    },
    customDatepickerParser(dateString) {
      // 按DD.MM.YYYY格式解析输入的字符串为Date对象
      return moment(dateString, "DD.MM.YYYY").toDate();
    }
  }
};
</script>

关键点说明：

• formatter负责将Date对象格式化为用户看到的DD.MM.YYYY字符串
• parseDate负责将用户输入的DD.MM.YYYY字符串解析为合法的Date对象
• 确保项目中已安装moment依赖（未安装的话执行npm install moment）

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