I try to change format of days in Date/month picker ponent. At the moment list of days as "M,T,W,T,F,S,S", but I need "Mo,Tu,We,Th,Fr,Sa,Su". In API I can see that necessary parameter called "day-format" and its value is null (default). Can anybody please explain: is it possible to change this format of days?

Here is the API of Vuetify:

I try to change format of days in Date/month picker ponent. At the moment list of days as "M,T,W,T,F,S,S", but I need "Mo,Tu,We,Th,Fr,Sa,Su". In API I can see that necessary parameter called "day-format" and its value is null (default). Can anybody please explain: is it possible to change this format of days?

Here is the API of Vuetify: https://vuetifyjs./en/ponents/date-pickers#date-month-pickers

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

3 Answers 3

• Use the weekday-format to pass the date to a function;
• Convert the date to day of the week (0..6)
• Use that as the index for an array of strings ('Mo'..'Su')

code:

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker :weekday-format="getDay" v-model="picker"></v-date-picker>
    </v-row>
  </v-app>
</div>

const daysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date().toISOString().substr(0, 10),
    }
  },
  methods:{
    getDay(date){
      let i = new Date(date).getDay(date)
      return daysOfWeek[i]
    }
  }
})

Multiple ways to solve for this, but I somewhat reverse-engineered their source to find out more about the properties that's being passed into the weekday-format prop:

  <div>
    <v-calendar
      :weekday-format="formatWeekDay"
    />
  </div>

  const calendar = {
    name: 'Calendar',
    methods: {

      formatWeekDay(props) {
        return new Date(props.date.replace(/-/g, '\/')).toLocaleDateString('en-US', {weekday: 'narrow'});
      }

    }
  };

I took some guidance from this answer to determine the best way to parse the date being provided back. You can read more about how the locale functionality works, here.

Use the first-day-of-week to pass the date to a function

<v-date-picker v-model="date" :first-day-of-week="1">