ElementUI 日期選擇器 DatePicker 實現週一，週二之類的速選

自己用到了，分享一下
很簡單，就是通過元件提供的快捷項實現的

<template>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value1"
      align="right"
      type="dates"
      placeholder="手動選擇多個"
      :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '週一',
            onClick(picker) {
                var date=new Date();
                var end=new Date().getTime()+60*24*3600*1000;//60天內的週一
                var day = date.getDay() || 7;
                var basenum=1;//1到7代表週一到週日
                var weekstart = new Date(date.getFullYear(), date.getMonth(), date.getDate() + basenum - day).getTime();
                var dates=[];
                if (weekstart >= date.getTime()) {
                    dates.push(weekstart)
                }
                while (weekstart<end){
                    weekstart=weekstart+7*24*3600*1000;
                    dates.push(weekstart)
                }
                picker.$emit('pick', dates);
            }
          },]
        },
        value1: '',
      };
    }
  };
</script>

最終效果如圖

本作品採用《CC 協議》，轉載必須註明作者和本文連結