I am working with a vuetify date range picker component and have the following code:
<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>
I am facing an issue where I cannot get the selected dates to display in the correct order. Even when using the sort function on the v-model for the date picker, if I select the newer date first, it displays that value first in the text field. I have tried implementing a computed property as shown below, but still unable to resolve the ordering problem:
computed: {
effectiveDateRange: function () {
// `this` refers 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) {
// Convert strings into dates and compare them
return new Date(b.date) - new Date(a.date);
}).join(' - ')
}
}