美文网首页技术贴
element DatePicker 快捷选项 获取本周、上周

element DatePicker 快捷选项 获取本周、上周

作者: zhudying | 来源:发表于2021-02-04 11:46 被阅读0次

    element ui 日期选择器范围选择的各种快捷选项

     <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
    </el-date-picker>
    
        pickerOptions: {
            shortcuts: [
              {
                text: '本周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  console.log(start.getDay(), start.getDate(), 'start')
                  var thisDay = start.getDay() - 1;
                  var thisDate = start.getDate();
                  if (thisDay != 0) {
                    start.setDate(thisDate - thisDay);
                  }
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '上周',
                onClick(picker) {
                  const oDate = new Date();
                  oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7);
    
                  var day = oDate.getDay() - 1
    
                  var start = new Date(),
                    end = new Date();
                  if (day == 0) {
                    start.setDate(oDate.getDate());
                    end.setDate(oDate.getDate() + 6);
                  } else {
                    start.setTime(oDate.getTime() - 3600 * 1000 * 24 * day);
                    end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (6 - day));
                  }
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '本月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setDate(1);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '上月',
                onClick(picker) {
                  const oDate = new Date();
                  var year = oDate.getFullYear();
                  var month = oDate.getMonth();
                  var start, end;
                  if (month == 0) {
                    year--
                    start = new Date(year, 11, 1)
                    end = new Date(year, 11, 31)
                  } else {
                    start = new Date(year, month - 1, 1)
                    end = new Date(year, month, 0);
                  }
    
                  picker.$emit('pick', [start, end]);
                }
              }
            ],
            disabledDate: (time) => {
              return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
            }
          },
    

    相关文章

      网友评论

        本文标题:element DatePicker 快捷选项 获取本周、上周

        本文链接:https://www.haomeiwen.com/subject/irhbtltx.html