element DatePicker 日期选择器时间限制

最新推荐文章于 2023-12-29 19:50:28 发布

七彩猫猫虫

最新推荐文章于 2023-12-29 19:50:28 发布

阅读量914

点赞数 1

分类专栏：工作中的小问题

本文链接：https://blog.csdn.net/sdaw_1/article/details/118516680

版权

本文介绍了如何使用Element UI的DatePicker组件实现日期选择的限制，包括初次加载时展示当前月及前后一个月，限定可选范围为当前日期前3个月，并在选定第一个日期后，限制只能选择前后一个月的日期。

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

在这里插入图片描述

主要功能：

1、初次载入时获取当前日期前后一个月
2、只能选择当前日期往前3个月
3、第一个日期选择后，只能选前后一个月

代码：

<el-date-picker
            style="margin-left: 10px; margin-right: 10px"
            v-model="time"
            format="yyyy-MM-dd "
            value-format="yyyy-MM-dd"
            @change="timeSearch()"
            @blur="test()"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>

pickerOptions: {
   
        
        onPick: ({
    maxDate, minDate }) => {
   
          // 限制前后31天之内
          // console.log('onpick')
          // console.log(minDate)
          // console.log(maxDate)
          //这里的minDate可以理解为第一个选中的日期

          this.selectDate = minDate.getTime();
          console.log(this.selectDate)
          if (minDate) {
   
            this.sign = '1'
            

          }
          if