Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

243
Vistas
How to sort Vuetify date range picker?

I have a vuetify date range picker as shown:

                    <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>

Then use the following computed property to return the values to the text field however I cannot get the dates to be in order. You can only choose two dates and if you choose the newer date first it fills in the text field with that value first even if I use the sort function on the v-model for the date picker. Any help would be appreciated.

            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(' - ')
            }
        }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Since the elements of the dates array are strings in the ISO 8601 format (YYYY-mm-dd or YYYY-mm), in which date and time values are in order from most significant to least significant, you can simply sort the array:

effectiveDateRange: function() {
  return this.dates.sort().join(' - ');
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda