javascript - How to change day-format (M > Mo, F > Fr...) in Datemonth pickers of Vuetify - Stack Overflow

admin管理员组

文章数量:1023018

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

Share Improve this question Follow edited Aug 20, 2019 at 16:22 Daniel 35.8k1717 gold badges114114 silver badges161161 bronze badges asked Aug 20, 2019 at 16:19 ZmagarochakZmagarochak 37311 gold badge33 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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">

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

Share Improve this question Follow edited Aug 20, 2019 at 16:22 Daniel 35.8k1717 gold badges114114 silver badges161161 bronze badges asked Aug 20, 2019 at 16:19 ZmagarochakZmagarochak 37311 gold badge33 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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">

本文标签：