验证 iso 日期，但在使用日期选择器组件时显示区域设置日期答案

【问题标题】：validate iso date but display locale date when using a date picker component验证 iso 日期，但在使用日期选择器组件时显示区域设置日期
【发布时间】：2019-11-20 12:59:03
【问题描述】：

我想使用支持本地化的日期选择器组件。我创建了这个日期选择器示例

HTML：

<div id="app">
  <v-app id="inspire">
  <v-menu 
    :value="showDatePicker" 
    max-width="290px"
  >
    <template v-slot:activator="{ on }">
      <v-text-field 
        :value="formattedDate"
        readonly 
        clearable
        label="Date"
        v-on="on"
        :rules="rules"
        :required="true"
        @input="selectDate"
      ></v-text-field>
    </template>
    <v-date-picker 
      :value="date" 
      :locale="currentLocale"
      no-title
      @input="selectDate"
    />
  </v-menu>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  data: () => ({
    showDatePicker: false,
    date: '',
    currentLocale: 'de',
    rules: [
      value => this.validateDate(value) || 'Invalid date'
    ]
  }),
  computed: {
     formattedDate: function () {
       const formattedDate = this.date

       // !! format the date based on this.currentLocale !!

       return formattedDate
     }
  },
  methods: {
    selectDate: function(newDate) {
      this.showDatePicker = false;
      this.date = newDate;
    },
    validateDate: function(date){
      // !! validate iso date here !!

      return true
    }
  }
})

https://codepen.io/anon/pen/ydZqxd?editors=1010

日期选择器组件本身返回 iso 格式的日期。我想使用它，但我也想为用户显示语言环境日期格式。事情变得棘手，因为我想用 iso 格式验证日期，但文本字段使用格式化的日期作为其值。因此，当涉及到验证时，文本字段会传入格式化日期，但这是错误值。它应该是 iso 日期。

拥有像 display/value 这样的东西会很酷，尽管它对文本字段没有意义......

有没有办法将 iso 格式传递给验证规则并仅显示格式化的日期？

【问题讨论】：

你不能通过 Date 运行事情吗？ new Date(arbitrary valid date string).toISOString() 将为您提供保证有效的 ISO 日期，thatsamedateobject.toLocaleString() 将为您提供本地化版本。
否，因为它传递的是语言环境日期而不是传递“真实”日期字符串

标签： vue.js vuetify.js

【解决方案1】：

你可以轻松搞定。只需按照以下代码：

new Vue({
    el: '#app',
    data: (vm) => ({
        showDatePicker: false,
        date: '',
        currentLocale: 'de',
        rules: [
            value => vm.validateDate(value) || 'Invalid date'
        ]
    }),
    computed: {
        formattedDate: function () {
            // !! format the date based on this.currentLocale !!
            let formattedDate = "";
            let options = {
                weekday: "short",
                year: "numeric",
                month: "2-digit",
                day: "numeric"
            }
            if (this.date) {
                formattedDate = new Date(this.date).toLocaleDateString(this.currentLocale, options)
            }
            return formattedDate
        }
    },
    methods: {
        selectDate: function (newDate) {
            this.showDatePicker = false;
            this.date = newDate;
        },
        validateDate: function (date) {
            // !! validate iso date here !!

            return true
        }
    }
});

1) 更多关于选项和toLocaleDateString 功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

2) 我也修正了这一点：value => this.validateDate(value) || 'Invalid date' 到 value => vm.validateDate(value) || 'Invalid date', because this not working in 'data'，因为你需要传递 vuejs 实例

3) 你可以为这一行添加预匹配 if (this.date) 以检查正确的日期

测试一下：https://codepen.io/anon/pen/dBEjor?editors=1010

【讨论】：