el-date-picker日期选择器控制时间禁用问题

最新推荐文章于 2024-07-30 15:37:39 发布

dn_666666

最新推荐文章于 2024-07-30 15:37:39 发布

阅读量378

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/lmk666__/article/details/131788839

版权

<el-date-picker :picker-options="pickerOptions" v-model="searchForm.daterange" value-        
    format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
    placeholder="选择日期">
</el-date-picker>

添加：:picker-options="pickerOptions"

pickerOptions配置：

pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate0 = minDate.getTime();
          if (maxDate) {
            this.choiceDate0 = '';
          }
        },
        disabledDate:
          (time) => {
            let choiceDateTime = new Date(this.choiceDate0).getTime();
            //限制前后60天，也可以.getMonth()来控制前后几个月
            const minTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() - 60);
            const maxTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() + 60);
            const min = minTime;
            const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
            const max = newDate < maxTime ? newDate : maxTime;
            //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
            if (this.choiceDate0) {
              return time.getTime() < min || time.getTime() > max;
            }
            //若一个日期也没选中 则 返回 当前日期以前日期可选
            return time.getTime() > newDate;
          }
      }