v-date-picker date format to DD-MM-YYYY vuetify

Question

I have a Vuetify date picker that loops through and I need to format the display date to DD-MM-YYYY. I tried with dayjs but it wasn't working.

The template:

<div v-for="(shareholder, i) in shareholders">
  <v-menu
    :ref="'dob'"
    v-model="modals[i]"
    :close-on-content-click="false"
    :return-value.sync="shareholder.dateOfBirth"
    transition="scale-transition"
    offset-y
    >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="shareholder.dateOfBirth"
        v-bind="attrs"
        v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
      v-model="shareholders.origDate"
      @input="$refs.dob[i].save(formatDate(shareholder.origDate))"
      first-day-of-week="1"
      ></v-date-picker>
  </v-menu>
</div>

mounted: {
    this.shareholders.map((item) => {
    // save original date
    item.origDate = item.dateOfBirth
    // modify date of birth
    item.dateOfBirth = this.formatDate(item.dateOfBirth)
    })
} ,
methods: {
    formatDate(date) {
    if (!date) {
    return null
    }
    const [year, month, day] = date.split('-')
    return `${day}-${month}-${year}`
    }
} 

If I use shareholders[i].dateOfBirth in the template it works fine but the date format will be YYYY-MM-DD.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div v-for="(shareholder, i) in shareholders">
  <v-menu
    :ref="'dob'"
    v-model="modals[i]"
    :close-on-content-click="false"
    :return-value.sync="shareholder.dateOfBirth"
    transition="scale-transition"
    offset-y
    >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="shareholder.dateOfBirth"
        v-bind="attrs"
        v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
      v-model="shareholders.origDate"
      @input="$refs.dob[i].save(formatDate(shareholder.origDate))"
      first-day-of-week="1"
      ></v-date-picker>
  </v-menu>
</div>

<script>
 export default {
 data(){
  return {
    shareholders: [
      {dateOfBirth: '2011-04-12'},
      {dateOfBirth: '2023-02-10'}
    ]
  }
},
mounted: {
    this.shareholders.map((item) => {
    // save original date
    item.origDate = item.dateOfBirth
    // modify date of birth
    item.dateOfBirth = this.formatDate(item.dateOfBirth)
    })
} ,
methods: {
    formatDate(date) {
    if (!date) {
    return null
    }
    const [year, month, day] = date.split('-')
    return `${day}-${month}-${year}`
    }
}
 }
</script>

Answer 1

You can simply format the date by splitting it with - and then construct it again and assigning to computed property which will bind in the <v-text-field>.

Live Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: vm => ({
    date: new Date().toISOString().substr(0, 10),
    dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
    menu1: false,
    menu2: false,
  }),

  computed: {
    computedDateFormatted () {
      return this.formatDate(this.date)
    },
  },

  watch: {
    date (val) {
      this.dateFormatted = this.formatDate(this.date)
    },
  },

  methods: {
    formatDate (date) {
      if (!date) return null
      const [year, month, day] = date.split('-')
      return `${day}-${month}-${year}`
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
        <v-col cols="12" lg="6">
          <v-menu
            v-model="menu2"
            :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="computedDateFormatted"
                label="Date"
                hint="DD-MM-YYYY format"
                persistent-hint
                prepend-icon="event"
                readonly
                v-bind="attrs"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker v-model="date" no-title @input="menu2 = false"></v-date-picker>
          </v-menu>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>