DatePicker 日期选择器限制范围

需求:限制时间范围为90天,默认时间为当前时间至当前时间之前的90天的

可选范围:当前时间,或当前时间之间的时间

限制范围:90天

效果图

template部分

 <el-date-picker
     v-model="time"
     ref='timeBox'
     value-format="yyyy-MM-dd HH:mm:ss"
     :picker-options="pickerOptions"
     :default-time="pickerDefaultTime"         
     type="datetimerange"
     range-separator="~"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
 ></el-date-picker>

script

export defau{
  data(){
    return {
      time:[],
    }
  },
      pickerOptions: {
        //时间选择范围
        let _this = this
        onPick: ({ maxDate, minDate }) => {
           let moment = require("moment");
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如果你选择了两个日期了,就把那个变量置空
          if (maxDate) {
            this.choiceDate = "";
          }
          if(maxDate && minDate){
            let time = new Date();
             //两个时间中较大的时间
            let endtime = moment(maxDate).format("YYYY-MM-DD");
            time=moment(time).format("YYYY-MM-DD");
             _this.time = [];
             //如果较大的时间是当天,默认显示当前时间
            if(endtime==time){
              let time1 = new Date();
              let start=moment(minDate).format("YYYY-MM-DD HH:mm:ss");
              let end=moment(time1).format("YYYY-MM-DD HH:mm:ss");
              _this.time[0] = start;
              _this.time[1] = end;
              this.time=_this.time;
              // 关闭--时间控件下拉框
              that.$refs.timeBox.handleClose();
            }
          }
        },
        disabledDate: time => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 90 * 24 * 3600 * 1000;
            // 当前日期 - one = 90天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 90天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() > Date.now()
            );
          } else {
            // 如果没有选择日期,就要限制不能选择今天及以后
            return time.getTime() > Date.now();
          }
        }
      }
}

文档说明

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值