Search code examples
vuejs2datepickervuetify.js

How to change Format datepicker header in vuetify

I want to change "August 2022" to "2022 August" but i can't find anything similar with this attribute in v-date-picker. How to change format of this header Vuetify Datepicker

Solution

  • You have a propery header-date-format that you can use to call your own method of formatting the headers

    <v-date-picker 
    v-model="picker" 
    :header-date-format="customFormatHeader"
></v-date-picker>

    customFormatHeader(isoDate) {
      const currentDate = new Date(isoDate)
      const month = currentDate.toLocaleString('default', {month: 'long' })
      const year = currentDate.toLocaleString('default', { year: 'numeric' })
      return year + month
}