element ui 日期选择框，开始日期不能晚于当前日期，结束日期不能早于开始日期、也不能晚于当前日期

最新推荐文章于 2024-05-28 16:00:49 发布

姜崽

最新推荐文章于 2024-05-28 16:00:49 发布

阅读量4.3k

点赞数 2

分类专栏： element-ui vue前端

本文链接：https://blog.csdn.net/qq_51296646/article/details/119240992

版权

vue前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

element-ui

6 篇文章 2 订阅

订阅专栏

本文介绍如何在前端使用El-Date-Picker组件实现日期选择时的范围限制，确保开始日期不晚于当前日期，结束日期不早于开始日期且不大于当前日期。通过设置`pickerOptions`的`disabledDate`属性，动态控制日期选择的可用范围。

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

**需求：**日期选择框事件范围内
假如开始时间选择2020年，那么结束时间不能早于2020，也不能大于当前日期
在这里插入图片描述
选择开始时间：无法选择比当前时间大的
开始时间选择2017年
那么结束时间

也不能大于当前时间

代码实现

<el-form-item label="台历日期">
        <el-date-picker
          v-model="dataForm.startDate"
          type="year"
          :picker-options="pickerOptionsStart"
          placeholder="开始日期"
          value-format="yyyy">
        </el-date-picker>
        ~
        <el-date-picker
          v-model="dataForm.endDate"
          type="year"
          :picker-options="pickerOptionsEnd"
          placeholder="结束日期"
          value-format="yyyy">
        </el-date-picker>
      </el-form-item>

在return里面

return {
        pickerOptionsStart: {
          // 禁止选择
          disabledDate: time => {
            let endDateVal = this.dataForm.endDate
            //if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime() || time.getTime() > Date.now()
            // }
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            let beginDateVal = this.dataForm.startDate
            // if (beginDateVal) {
            return (
                time.getTime() <
                new Date(beginDateVal).getTime() - 86400000 || time.getTime() > Date.now()
            )
            // }
          }
        }
      }