ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

具体效果如下：

未选择时间时，最初选择时间不能超过今天
elementui 日期插件控制范围,vue,经验分享,前端,elementui,前端,javascript

选择初始时间后，第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。
例如：点击7月15日后，在8月14日往后的日期全部禁止选中
elementui 日期插件控制范围,vue,经验分享,前端,elementui,前端,javascript

7月15日前一个月的6月15日之前的日期也全部禁止选中

elementui 日期插件控制范围,vue,经验分享,前端,elementui,前端,javascript

选好起始时间和结束时间后，下拉框与所有禁止选用的日期限制全部放开，以供下一轮的正常选择

elementui 日期插件控制范围,vue,经验分享,前端,elementui,前端,javascript

实现方法

组件demo：

<el-date-picker
   v-model.trim="searchDate"
   :picker-options="pickerOptions"
   type="datetimerange"
   size="small"
   range-separator="~"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   value-format="yyyy-MM-dd HH:mm">    
</el-date-picker>

js：

data(){
  return {
       selectData: '', // 记录初始点击DatePicker日期选择器的时间
       pickerOptions: {
        // onPick：选中日期后会执行的回调。写成箭头函数否则this.selectData会报错
        // 点击时，选择的是初始时间，也就是minDate
        onPick: ({ maxDate, minDate }) => {
            this.selectData = minDate.getTime();
            if (maxDate) {
              // 第二次点击日期选择器，选好初始时间和结束时间后，解除禁用限制
              this.selectData = ''
            }
        },
        // 设置禁用状态，参数为当前日期，要求返回 Boolean。同理写成箭头函数
        disabledDate: (time) => {
            // 是否限制的判断条件，if里写点击了初始时间后的判断条件
            // 即第二个选择的时间前后不能超过初始时间的一个月
            if (this.selectData) {
            	return time.getTime() > new Date() || time.getTime() > this.selectData + 30 * 24 * 3600 * 1000 || time.getTime() < this.selectData - 30 * 24 * 3600 * 1000;
            	// time.getTime() > new Date() 为所选时间不能超过今日
            	// 30 * 24 * 3600 * 1000则为一个月的毫秒数，根据自己的需求修改限制的时间范围
          	} else {
            	return time.getTime() > new Date();
            	// 如果不需要限制所选时间不能超过今日，则直接return false即可
          	}
        },
     },
  }
}