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

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

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

需求：

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

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

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

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

实现效果：

（ 注：小编操作和写文日期5月27日）

 

实现代码：

vue  template 代码：

        <el-col :span="8"
          ><el-form-item
            label="演练开始日期"
            prop="startTime"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="addDrillRecordRow.startTime"
              class="baseInput"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              :picker-options="pickerOptionsStart"
            ></el-date-picker></el-form-item
        ></el-col>
        <el-col :offset="1" :span="8"
          ><el-form-item
            label="演练结束日期"
            prop="endTime"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="addDrillRecordRow.endTime"
              class="baseInput"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker></el-form-item
        ></el-col>

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是表单数据的绑定对象。

 

总结：

1. 这里实现了日期控件的选择范围限制，时间选择器和日期时间选择器应该也可以类似实现。

2. 类似这种日期选择的功能，在前端做限制处理是比较好的，优化了用户体验，如果放在后台进行验证，可能更加复杂。

 

还可以参考下面两篇文章：

https://blog.csdn.net/weixin_43565820/article/details/89883512

https://www.jianshu.com/p/1804ac782e14

 

有问题欢迎来微信找我！一起学习成长，交个朋友！^_^

微信搜索：acoolgiser，或者直接扫描