title: How to change Vuetify calendar date format
body: <p>I am attempting to enable inputted events on the following Vuetify calendar: </p>
  
  <p><a href="https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue" rel="nofollow noreferrer">https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue</a>.</p>
  
  <p>I have set up my calendar to accept inputted data submitted in a form, including name, details, start, end, color. When I submit the form, an error occurs saying that </p>
  
  <blockquote>
    <p>the start and end properties are required on all events to be a valid timestamp in the format YYYY-MM-DD. </p>
  </blockquote>
  
  <p>I am using type="date" in the start and end input fields, which render the dates in the MM-DD-YYYY. I tried using the Vuetify date picker instead in order to get the fields to render in YYYY-MM-DD format, but to no avail. How can I reconfigure this calendar to instead accept MM-DD-YYYY format for dates? </p>
  
  <p>CALENDAR MODIFIED: </p>
  
  <p>moment added to function</p>
  
  <pre><code>      async addEvent () {
          this.start = await new Date(this.start).toISOString().substring(0,10)
          this.end =  await new Date(this.end).toISOString().substring(0,10)
          this.events.push({name: this.name})
          this.events.push({details: this.details})
          this.events.push({start: this.start})
          this.events.push({end: this.end})
          this.events.push({color: this.color})
        },
  </code></pre>
  
  <p>Full Code</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-row class="fill-height"&gt;
      &lt;v-col&gt;
        &lt;v-sheet height="64"&gt;
          &lt;v-toolbar flat color="white"&gt;
            &lt;v-btn outlined class="mr-4" @click="setToday"&gt;
              Today
            &lt;/v-btn&gt;
            &lt;v-btn fab text small @click="prev"&gt;
              &lt;v-icon small&gt;mdi-chevron-left&lt;/v-icon&gt;
            &lt;/v-btn&gt;
            &lt;v-btn fab text small @click="next"&gt;
              &lt;v-icon small&gt;mdi-chevron-right&lt;/v-icon&gt;
            &lt;/v-btn&gt;
            &lt;v-btn
              color="primary"
              dark
              @click.stop="dialog = true"
            &gt;
              New Event
            &lt;/v-btn&gt;
            &lt;v-toolbar-title&gt;{{ title }}&lt;/v-toolbar-title&gt;
            &lt;div class="flex-grow-1"&gt;&lt;/div&gt;
          &lt;/v-toolbar&gt;
        &lt;/v-sheet&gt;
  
        &lt;v-dialog v-model="dialog" max-width="500"&gt;
          &lt;v-card&gt;
            &lt;v-container&gt;
              &lt;v-form @submit.prevent="addEvent"&gt;
                &lt;v-text-field v-model="name" type="text" label="name"&gt;&lt;/v-text-field&gt;
                &lt;v-text-field v-model="details" type="text" label="detail"&gt;&lt;/v-text-field&gt;
                &lt;v-text-field v-model="start" type="date" label="start"&gt;&lt;/v-text-field&gt;
                &lt;v-text-field v-model="end" type="date" label="end"&gt;&lt;/v-text-field&gt;
                &lt;v-text-field v-model="color" label="color"&gt;&lt;/v-text-field&gt;
                &lt;v-btn type="submit" color="success" class="mr-4" @click.stop="dialog = false"&gt;
                  submit
                &lt;/v-btn&gt;
              &lt;/v-form&gt;
            &lt;/v-container&gt;
          &lt;/v-card&gt;
        &lt;/v-dialog&gt;
  
        &lt;v-sheet height="600"&gt;
          &lt;v-calendar
            ref="calendar"
            v-model="focus"
            color="primary"
            :events="events"
            :event-color="getEventColor"
            :event-margin-bottom="3"
            :now="today"
            :type="type"
            @click:event="showEvent"
            @click:more="viewDay"
            @click:date="viewDay"
            @change="updateRange"
          &gt;&lt;/v-calendar&gt;
          &lt;v-menu
            v-model="selectedOpen"
            :close-on-content-click="false"
            :activator="selectedElement"
            full-width
            offset-x
          &gt;
            &lt;v-card
              color="grey lighten-4"
              min-width="350px"
              flat
            &gt;
              &lt;v-toolbar
                :color="selectedEvent.color"
                dark
              &gt;
                &lt;v-btn icon&gt;
                  &lt;v-icon&gt;mdi-pencil&lt;/v-icon&gt;
                &lt;/v-btn&gt;
                &lt;v-toolbar-title v-html="selectedEvent.name"&gt;&lt;/v-toolbar-title&gt;
                &lt;div class="flex-grow-1"&gt;&lt;/div&gt;
                &lt;v-btn icon&gt;
                  &lt;v-icon&gt;mdi-heart&lt;/v-icon&gt;
                &lt;/v-btn&gt;
                &lt;v-btn icon&gt;
                  &lt;v-icon&gt;mdi-dots-vertical&lt;/v-icon&gt;
                &lt;/v-btn&gt;
              &lt;/v-toolbar&gt;
              &lt;v-card-text&gt;
                &lt;span v-html="selectedEvent.details"&gt;&lt;/span&gt;
              &lt;/v-card-text&gt;
              &lt;v-card-actions&gt;
                &lt;v-btn
                  text
                  color="secondary"
                  @click="selectedOpen = false"
                &gt;
                  Cancel
                &lt;/v-btn&gt;
              &lt;/v-card-actions&gt;
            &lt;/v-card&gt;
          &lt;/v-menu&gt;
        &lt;/v-sheet&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    //import moment from 'moment'
    export default {
      data: () =&gt; ({
        today: '2019-01-08',
        focus: '2019-01-08',
        type: 'month',
        typeToLabel: {
          month: 'Month',
          week: 'Week',
          day: 'Day',
          '4day': '4 Days',
        },
        name: null,
        details: null,
        start: null,
        end: null,
        color: null,
        selectedEvent: {},
        selectedElement: null,
        selectedOpen: false,
        events: [
          {
            name: 'Vacation',
            details: 'Going to the beach!',
            start: '2018-12-29',
            end: '2019-01-01',
            color: 'blue',
          }
        ],
        dialog: false,
      }),
      computed: {
        title () {
          const { start, end } = this
          if (!start || !end) {
            return ''
          }
          const startMonth = this.monthFormatter(start)
          const endMonth = this.monthFormatter(end)
          const suffixMonth = startMonth === endMonth ? '' : endMonth
          const startYear = start.year
          const endYear = end.year
          const suffixYear = startYear === endYear ? '' : endYear
          const startDay = start.day + this.nth(start.day)
          const endDay = end.day + this.nth(end.day)
          switch (this.type) {
            case 'month':
              return `${startMonth} ${startYear}`
            case 'week':
            case '4day':
              return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
            case 'day':
              return `${startMonth} ${startDay} ${startYear}`
          }
          return ''
        },
        monthFormatter () {
          return this.$refs.calendar.getFormatter({
            timeZone: 'UTC', month: 'long',
          })
        },
      },
      methods: {
        viewDay ({ date }) {
          this.focus = date
          this.type = 'day'
        },
        getEventColor (event) {
          return event.color
        },
        setToday () {
          this.focus = this.today
        },
        prev () {
          this.$refs.calendar.prev()
        },
        next () {
          this.$refs.calendar.next()
        },
        async addEvent () {
          this.start = await new Date(this.start).toISOString().substring(0,10)
          this.end =  await new Date(this.end).toISOString().substring(0,10)
          console.log(this.start)
          this.events.push({name: this.name})
          this.events.push({details: this.details})
          this.events.push({start: this.start})
          this.events.push({end: this.end})
          this.events.push({color: this.color})
        },
        showEvent ({ nativeEvent, event }) {
          const open = () =&gt; {
            this.selectedEvent = event
            this.selectedElement = nativeEvent.target
            setTimeout(() =&gt; this.selectedOpen = true, 10)
          }
          if (this.selectedOpen) {
            this.selectedOpen = false
            setTimeout(open, 10)
          } else {
            open()
          }
          nativeEvent.stopPropagation()
        },
        updateRange ({ start, end }) {
          // You could load events from an outside source (like database) now that we have the start and end dates on the calendar
          this.start = start
          this.end = end
        },
        nth (d) {
          return d &gt; 3 &amp;&amp; d &lt; 21
            ? 'th'
            : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
        },
      },
    }
  &lt;/script&gt;
  
  
  </code></pre>