element 日期选择器

热爱学习的阳仔

已于 2022-11-14 17:11:07 修改

阅读量1.7k

点赞数 1

文章标签：前端 vue.js elementui

于 2022-11-14 11:43:40 首次发布

本文链接：https://blog.csdn.net/weixin_53760584/article/details/127844213

版权

element DatePicker 日期选择器限制在三个月外加快捷选择日期

在项目中想使用日期选择器，并且把时间限制在三个月以内，在官网中查看到 disabledDate 和 onPick 两个方法。

在这里插入图片描述
在项目中直接使用：

在data中定义

选中第一个时间后，就要设置不可选中区域
在这里插入图片描述
监听存放时间的数组是否为空，如果为空，那就要重置minDate（为解决clearable清空后，依然记录的是上一次选择的minDate时间问题）

部分可复制代码

   <el-date-picker v-model="queryParams.devTime" value-format="yyyy-MM-dd" type="daterange" align="right"
          unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable
          :picker-options="pickerOptions">
   </el-date-picker>

   maxDate: undefined,
   minDate: undefined,

  computed: {
    pickerOptions() {
      let _this = this
      return {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
            _this.minDate = start
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
            _this.minDate = start
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
            _this.minDate = start
          }
        }],
        disabledDate(time) {
          const times = 86400000 * 90  // 三个月的毫秒数
          let curSelectTime = new Date(_this.minDate).getTime()
          let before = curSelectTime - times//前三个月毫秒数
          let after = curSelectTime + times//后三个月毫秒数
          return time.getTime() > after || time.getTime() < before
        },

        onPick({ maxDate, minDate }) {
          if (!maxDate) {
            _this.minDate = minDate
          }
        }
      }
    }
  },

  watch: {
    'queryParams.devTime': {
      deep: true, // 深度监听
      handler() {
        if (!this.queryParams.devTime) {
          this.queryParams.devTime == []
          this.minDate = undefined
        }  
      }
    }
  },