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

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>

Solution

As per your comment on @Rohit's answer, I assume that your dates from the database are in YYYY-MM-DD format and on the same page, Vuetify's date picker format also accepts YYYY-MM-DD format. So, the conversion would not be very straightforward because the date picker will always accept the YYYY-MM-DD format and you need to convert it back into DD-MM-YYYY format for display purposes.

I have a strategy here which is as follows-

On the mounted hook, convert all YYYY-MM-DD format dates into DD-MM-YYYY and also save the original date format on another key let's say origDate (for date picker use).
As v-model for date picker menu, use the origDate key (because the date picker accepts YYYY-MM-DD format), and on every input convert chosen date back to the DD-MM-YYYY format.
As v-model for text field, use the dateOfBirth which is in DD-MM-YYYY format.

Here is the working demo. Hope it helps-

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: vm => ({
    modals: {},
    shareholders: [{
      dateOfBirth: '2022-12-12',
    }, 
    {
      dateOfBirth: '2023-12-12',
    }]
  }),


  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 src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/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">
          <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="shareholder.origDate"
                @input="$refs.dob[i].save(formatDate(shareholder.origDate))"
                first-day-of-week="1"
                ></v-date-picker>
            </v-menu>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>