javascript 如何在Vuetify的日期/月份选择器中更改日期格式(M>Mo,F>Fr...)

rvpgvaaj  于 2023-02-07  发布在  Java
关注(0)|答案(3)|浏览(123)

我尝试在日期/月份选择器组件中更改日期格式。目前日期列表为“M,T,W,T,F,S,S",但我需要“Mo,Tu,We,Th,Fr,Sa,Su"。在API中,我可以看到称为“日期格式”的必要参数,其值为null(默认值)。请解释一下:可以更改日期的格式吗?
下面是Vuetify的API:https://vuetifyjs.com/en/components/date-pickers#date-month-pickers

disbfnqx

disbfnqx1#

  • 使用weekday-format将日期传递给函数;
  • 将日期转换为星期几(0..6)
  • 将其用作字符串数组的索引('Mo'..'Su')

代码:

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

v6ylcynt2#

有多种方法可以解决这个问题,但我对它们的源代码进行了一些逆向工程,以了解更多关于传递到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'});
      }

    }
  };

我从这个answer中得到了一些指导,以确定解析返回的日期的最佳方法,您可以阅读更多关于locale功能如何工作的内容,here

gz5pxeao

gz5pxeao3#

使用一周的第一天将日期传递给函数

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

相关问题