CODEWITHSUNDEEP
javascriptvue.jsdatepickervuetify.js
Zmagarochak
Zmagarochak

Reputation: 373

How to change day-format (M > Mo, F > Fr...) in Date/month pickers of Vuetify

I try to change format of days in Date/month picker component. 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.com/en/components/date-pickers#date-month-pickers

Upvotes: 2

Views: 6446

Answers (3)

Viacheslav Kyian
Viacheslav Kyian

Reputation: 1

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

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

Upvotes: 0

Erutan409
Erutan409

Reputation: 752

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.

Upvotes: 0

Daniel
Daniel

Reputation: 35684

  • 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]
    }
  }
})

Upvotes: 3

Related Questions