Vuetify 1.5 multiple dates datepicker shows blank dates with MM/DD/YYYY moment formatted date

Question

I have a requirement to use multiple dates in vuetify datepicker with 'MM/DD/YYYY' format with date selected as todays date. However when I use moment to choose current date and format it to 'MM/DD/YYYY' it is giving me an error of invalid time and displays blank datepicker. Here's the codepen : https://codepen.io/raunaktwits/pen/rNLBgQN?editors=1010

  <v-app id="inspire">
    <v-layout row wrap>
      <v-flex xs12 sm6>
        <v-date-picker
          v-model="dates"
          multiple
        ></v-date-picker>
      </v-flex>
      <v-flex xs12 sm6>
        <v-menu
          ref="menu"
          v-model="menu"
          :close-on-content-click="false"
          :nudge-right="40"
          :return-value.sync="dates"
          lazy
          transition="scale-transition"
          offset-y
          full-width
          min-width="290px"
        >
          <template v-slot:activator="{ on }">
            <v-combobox
              v-model="dates"
              multiple
              chips
              small-chips
              label="Multiple picker in menu"
              prepend-icon="event"
              readonly
              v-on="on"
            ></v-combobox>
          </template>
          <v-date-picker v-model="dates" multiple no-title scrollable>
            <v-spacer></v-spacer>
            <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
            <v-btn flat color="primary" @click="$refs.menu.save(dates)">OK</v-btn>
          </v-date-picker>
        </v-menu>
      </v-flex>
    </v-layout>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: () => ({
    dates: [moment().format('MM/DD/YYYY'), moment().format('MM/DD/YYYY')],
    menu: false
  })
})

BeaST 30 BeaST 30 · Accepted Answer · 2020-10-06T20:16:23

v-date-picker accepts ISO 8601 date strings (YYYY-MM-DD). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) International Standards page.

As per the official documentation, you must choose dates in YYYY-MM-DD format

Also, duplicate dates might show an error.

dates: [moment().add(1,'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],

You can use this piece of code as your v-model

Also, if you need to show the date in your preferred format, display the date inside a text-field wrapped inside a v-menu

 <v-menu
      ref="menu1"
      v-model="menu1"
      :close-on-content-click="false"
      transition="scale-transition"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="dateFormatted"
          label="Date"
          hint="MM/DD/YYYY format"
          persistent-hint
          prepend-icon="event"
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="date" no-title @input="menu1 = false"></v-date-picker>
    </v-menu>

Here the dateFormatted can be used as per your convenience.

Have a look at this codepen.

codepen.io/arjun3023/pen/BazapdM?editors=1010

Vuetify 1.5 multiple dates datepicker shows blank dates with MM/DD/YYYY moment formatted date

1 Answers