vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间

总结一下日期控件实现开始日期、结束日期的选择范围限制，以便更符合实际情况。

需求：

1. 开始日期和结束日期都必须是今天之前；

2. 先选择开始日期，那么结束日期必须在开始日期之后，即只能选择开始日期之后的日期；

3. 先选择结束日期，那么开始日期必须在结束日期之前，即只能选择结束日期之前的日期；

三个条件是【且】的关系。

实现效果：

实现代码：
vue template 代码：

script 代码

//时间限制，符合日期先后顺序的实际情况
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.addDrillRecordRow.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() > this.addDrillRecordRow.endTime  /*开始日期要在选择的结束日期之前*/
            );
          }
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意数字不一样*/
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.addDrillRecordRow.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() < this.addDrillRecordRow.startTime /*结束日期要在选择的开始日期之后*/
            );
          }
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
        }
      }

这里的addDrillRecordRow是表单数据的绑定对象。

原文链接：https://blog.csdn.net/acoolgiser/article/details/106378033