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=".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>

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./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>

• javascript
• vue.js
• datepicker
• vuetify.js

4 Answers 4

You can simply format the date by splitting it with - and then construct it again and assigning to puted 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,
  }),

  puted: {
    putedDateFormatted () {
      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/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis./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="putedDateFormatted"
                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>

As per your ment 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-

1. 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).
2. 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.
3. 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/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis./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>

You can't use puted variable in v-model directive, because puted values are readonly and v-model saves the value. To do this you need to format this date in some other way, for example

<script src="https://cdnjs.cloudflare./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>