VuetifyJS 日期選擇器不正確的日期值

Question

在我的項目中，我定義了一個test-date-picker ，這是有效的。

問題是當我在v-text-field寫入錯誤的日期時，例如“20/00/2020”（我使用 moment.js 來驗證日期）。

在date錯誤時我設置的date觀察者

this.date_it_value = "";
this.date_en_value = "";

和這項工作，但在v-text-field我仍然看到“20/00/2020”。

我該如何解決？ 我失去了我所有的工作日試圖解決這個問題！！！

Vue.component('test-date-picker', {
                template: `
                    <v-menu
                          v-model="pannelloAperto"
                        :close-on-content-click="false"
                        :nudge-right="40"
                        transition="scale-transition"
                        offset-y
                          max-width="290px"
                          min-width="290px"
                        >
                          <template v-slot:activator="{ on }">
                        <v-text-field
                            prepend-icon="event"
                            v-on="on"
                            :value="date_it_value"
                            @input="riportaDataIT"
                            :placeholder="placeholder"
                            :rules="required == 1? rules : undefined"
                        >

                        <template #label v-if="required == 1">
                            {{ label }} <span class='red--text'><strong>*</strong></span>
                        </template>

                        <template #label v-else>
                            {{ label }}
                        </template>

                    </v-text-field>
                          </template>
                          <v-date-picker
                            locale="it-in"
                            :value="date_en_value"
                            no-title
                            @change="riportaDataEN"
                            :min="min"
                            :max="max"
                          ></v-date-picker>
                    </v-menu>
                `,
                props: {
                    min: {},
                    max: {},
                    date: {
                        default: ""
                    },
                    label: {
                        default: "Data"
                    },
                    placeholder: {},
                    required: {
                        default: 0
                    },
                    rules: {
                        default: ""
                    }
                },
                data: () => ({
                    pannelloAperto: false,
                    date_it_value: "",
                    date_en_value: ""
                }),
                methods: {
                    riportaDataIT(new_it_date) {
                        if (new_it_date.length == 10) {
                            this.$emit("update:date", new_it_date);
                        }
                    },
                    riportaDataEN(new_en_date) {
                        this.pannelloAperto = false;
                        this.$emit("update:date", this.date_en_to_it(new_en_date));
                    },
                    date_en_to_it(date_en) {
                        if (typeof date_en === "undefined" || !date_en) return "";
                        const [year, month, day] = date_en.split('-')
                        return `${day}/${month}/${year}`
                    },
                    date_it_to_en(date_it) {
                        if (typeof date_it === "undefined" || !date_it) return "";
                        const [day, month, year] = date_it.split('/')
                        return `${year}-${month}-${day}`
                    }
                },
                watch: {
                    date: function(val) {
                        if (moment(val, "DD/MM/YYYY").isValid()) {
                            this.date_it_value = val;
                            this.date_en_value = this.date_it_to_en(val);
                        } else {
                            this.date_it_value = "";
                            this.date_en_value = "";
                            if (this.date != "") this.$emit("update:this.date", "");
                        }
                    },
                }
            });

Answer 1

你過度思考你需要做什么：

<div id="app">

  <v-menu v-model="menu" :close-on-content-click="false" max-width="290">

    <template v-slot:activator="{ on }">
      <v-text-field v-on="on" :value="pickerFormatted" label="Formatted with Moment.js" readonly></v-text-field>
    </template>

    <v-date-picker v-model="picker" :max="pickerMax" @change="menu = false"></v-date-picker>

  </v-menu>

  EN: {{ date(picker, 'en', 'L') }}

  IT: {{ date(picker, 'it', 'L') }}

</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data: () => ({
    menu: false,
    picker: new Date().toISOString().substr(0, 10),
    pickerMax: new Date().toISOString().substr(0, 10)
  }),

  computed: {

    pickerFormatted() {
      return this.date(this.picker, 'it', 'LL')
    }

  },

  created() {
    this.moment = window.moment
  },

  methods: {

    date(date, locale, format) {
      return this.moment(date).locale(locale).format(format)
    }

  }

})

結果是：

EN: 04/01/2020
IT: 01/04/2020

強烈建議僅在輸出點格式化日期。