0
230
ViewsForce date range picker to always display in a chronological order
I have vuetify date range picker
Right now it displays
I would like to force to always display in a lesser date order first for my model.
Ex. 5/1/2022 - 5/14/2022
ยท
Juan Pablo Isaza
2 answers
Answer question0
You can use a computed prop to sort/format the dates, and bind the result to the text field's value:
๐
<v-text-field :value="datesText" readonly />
<v-date-picker v-model="dates" range />
export default {
data: () => ({
dates: [/* date strings */],
}),
computed: {
๐
datesText() {
const dateFormatter = new Intl.DateTimeFormat('en-US')
return this.dates
.sort((a, b) => new Date(a) - new Date(b)) // sort chronologically
.map(d => dateFormatter.format(new Date(d))) // format date in en-US locale
.join(' - ')
},
},
}
ยท
Juan Pablo Isaza
Report
0
You can achieve this by sorting an v-model input value.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dates: [],
}),
computed: {
dateRangeText () {
return this.dates.sort().join(', ')
},
},
})<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-row>
<v-col
cols="12"
sm="6"
>
<v-date-picker
v-model="dates"
range
></v-date-picker>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
v-model="dateRangeText"
label="Date range"
prepend-icon="mdi-calendar"
readonly
></v-text-field>
model: {{ dates }}
</v-col>
</v-row>
</v-app>
</div>
ยท
Juan Pablo Isaza
Report
Answer question