0
244
ViewsForzar el selector de intervalo de fechas para que se muestre siempre en orden cronológico
Tengo selector de rango de fechas vuetify
Ahora mismo se muestra
Me gustaría obligar a mostrar siempre en un orden de fecha menor primero para mi modelo.
Ex. 01/05/2022 - 14/05/2022
·
Juan Pablo Isaza
2 answers
Answer question0
Puede usar un accesorio calculado para ordenar/formatear las fechas y vincular el resultado al value del campo de texto:
👇 <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
Puede lograr esto ordenando un valor de entrada v-model .
demostración :
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