element DatePicker 快捷选择昨日今日近一周近30天近一年；并且限制范围

最新推荐文章于 2023-12-12 14:29:16 发布

Passerby_K

最新推荐文章于 2023-12-12 14:29:16 发布

阅读量1.8k

点赞数 1

分类专栏： vue element

本文链接：https://blog.csdn.net/Passerby_K/article/details/118549533

版权

Vue el-date-picker 日期范围快捷选项禁用日期

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

element

11 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

<el-date-picker
  size="small"
  v-model="time"
  type="daterange"
  :picker-options="pickerOptions"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  align="right">
</el-date-picker>

data(){
	return{
	     time:[],
		 startTime:'2021-06-29',
      	 endTime:'2021-07-07',
		 pickerOptions: {
          disabledDate: (time) => {
                let beginDate = new Date(this.startTime)
                let endDate = new Date(this.endTime)
                return time.getTime() > endDate.getTime() || time.getTime() < beginDate.getTime()
          },
          shortcuts: [
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const end = new Date();
              end.setTime(end.getTime());
              end.setHours(end.getHours());
              end.setMinutes(end.getMinutes());
              end.setSeconds(end.getSeconds());
              const start = new Date();
              start.setTime(start.getTime());
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近90天',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },
          ],
      },
	}
}