如何对 Vuetify 日期范围选择器进行排序？

Question

我有一个 vuetify 日期范围选择器，如图所示：

                    <v-menu ref="effectiveDateMenu"
                        v-model="effectiveDateMenu"
                        :close-on-content-click="false"
                        transition="scale-transition"
                        offset-y
                        max-width="290px"
                        min-width="auto">
                    <template v-slot:activator="{ on, attrs }">
                        <v-text-field label="Time Period"
                                      v-model="effectiveDateRange"
                                      filled
                                      dense
                                      rounded
                                      @*:rules="[v => !!(v && v.length) || 'Rating period is required']"*@
                                      v-bind="attrs"
                                      v-on="on"
                                      range
                                      required
                                      :class="toggleEdit ? 'locked' : 'editable'"
                                      :readonly="toggleEdit"></v-text-field>
                    </template>
                    <v-date-picker v-model="dates"
                                   no-title
                                   @@input="datesPicked()"
                                   range></v-date-picker>
                </v-menu>

然后使用以下计算的属性到 return 文本字段的值，但是我无法按顺序排列日期。您只能选择两个日期，如果您先选择较新的日期，它会先用该值填充文本字段，即使我在日期选择器的 v-model 上使用排序功能也是如此。任何帮助将不胜感激。

            computed: {
            effectiveDateRange: function () {
                // `this` points to the vm instance

                return this.dates.map((element) => {
                    var d = new Date(element);
                    return `${d.getUTCMonth() + 1}/${d.getUTCDate()}/${d.getUTCFullYear()}`;
                }).sort(function (a, b) {
                    // Turn your strings into dates, and then subtract them
                    // to get a value that is either negative, positive, or zero.
                    return new Date(b.date) - new Date(a.date);
                }).join(' - ')
            }
        }

Answer 1

由于 dates 数组的元素是 ISO 8601 格式的字符串（YYYY-mm-dd 或 YYYY-mm），其中日期和时间值从最重要到最不重要，您可以简单地对数组进行排序：

effectiveDateRange: function() {
  return this.dates.sort().join(' - ');
}

如何对 Vuetify 日期范围选择器进行排序？

How to sort Vuetify date range picker?

javascript

vue.js

vuejs2

vuetify.js