修改elementui 的datepicker日期选择器自然周从周一至周日

1,251 阅读1分钟

背景

在elemnet 官网上有相关的配置,默认是按照国外从周日开始,可以修改成周一或者其他周几开始

image.png

代码如下

//vue
 <el-date-picker
  v-model="pickerDate"
  type="week" //我这里是周,天等等都可以
  size="small"
  format="yyyy 第 WW 周"
  placeholder="选择周"
  :picker-options="pickerOptions"
  @change="handleDateChange"
  value-format="yyyy-MM-dd">
  //js部分
  export default {
    components: {LuckySheet},
    data() {
       const time=this.$moment(new Date()).format('YYYY-MM-DD');
       return {
        pickerDate: time,
        pickerOptions: {
          firstDayOfWeek: 1,//改变自然周从周一至周日
          disabledDate(time) {
            return time.getTime() > Date.now(); //今日之后都不可选配置
         }
        },
      methods: {
        handleDateChange() {
          console.log('返回的时间',this.pickerDate)
        }
      },
   }

效果图如下:

image.png

注意点

选择周的时候默认拿到的选择时间是选择周的周一时间,但我们以上操作,通过firstDayOfWeek: 1,改变自然周从周一至周日, type="week" 选择周的时候,返回的时间是周二的时间,这里需要注意时间的处理

image.png

image.png