我有一个 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>
然后使用以下计算属性将值返回到文本字段,但是我无法使日期按顺序排列。您只能选择两个日期,如果您首先选择较新的日期,即使我在日期选择器的 v 模型上使用排序功能,它也会首先使用该值填充文本字段。任何帮助将不胜感激。
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(' - ')
}
}
最佳答案
由于 dates
数组的元素是 ISO 8601 格式的字符串(YYYY-mm-dd 或 YYYY-mm),其中日期和时间值按从最高有效到最低有效的顺序排列重要的是,您可以简单地对数组进行排序:
effectiveDateRange: function() {
return this.dates.sort().join(' - ');
}
关于javascript - 如何对 Vuetify 日期范围选择器进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70747014/