element日历限制只能选30天

最新推荐文章于 2024-09-03 16:10:34 发布

33455432

最新推荐文章于 2024-09-03 16:10:34 发布

阅读量337

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38999134/article/details/128544425

版权

这篇文章展示了如何在Vue应用中使用日期选择器组件限制用户选择的日期范围不超过30天。通过设置`pickerMinDate`和`pickerMaxDate`，以及自定义`disabledDate`函数来实现这一功能。同时，当选择新的日期时，会更新最小和最大可选日期。

摘要由CSDN通过智能技术生成

 data() {
      return {
        // 日历最多选择30天
        data1Map: new Map(),
        data2Map: new Map(),
        pickerMinDate: null,
        pickerMaxDate: null,
        day31: 31 * 24 * 3600 * 1000,
        // 日期使用
        pickerOptions1: {
            onPick: ({ maxDate, minDate }) => {
            if (minDate && this.pickerMinDate) {
              this.pickerMinDate = null;
            } else if (minDate) {
              this.pickerMinDate = minDate.getTime();
            }
          },
          disabledDate: (time) => {
            if (this.pickerMinDate) {
              return (time.getTime() > (this.pickerMinDate + this.day31)) || (time.getTime() < (this.pickerMinDate - this.day31));
            }
            return false;
          },
        },
      }
   }

 <el-date-picker
	 v-model="time"
	 size="small"
	 style="width:350px"
	 type="datetimerange"
	 value-format="yyyy-MM-dd HH:mm:ss"
	 @change="dataChange"
	 :picker-options="pickerOptions1"
	 start-placeholder="开始日期"
	 end-placeholder="结束日期">
 </el-date-picker>