element UI datepicker组件限制可选日期范围

小灰灰 2023-06-01 06:24 43阅读 0赞

长话短说，简单粗暴上代码了，在element中的datepicker，可以自由选择日期，如下：

![1440803-20190828175735491-204648293.png][]

然后我们根据element 官网的文档，给datepicker组件动态改变 `picker-options` 中的 `disableDate` 即可对可选日期进行限制。如下：

<el-date-picker
       type="date"
       placeholder="选择日期"
       v-model="start_time"
       style="width: 100%;"
       value-format="yyyy-MM-dd"
       :picker-options="startDateDisabled"
       @change="getStartTime"
       >
    </el-date-picker>

data () {
      return {
            startDateDisabled: {},
            endDateDisabled: {}
       }                       
    }

这里是我对开始日期和结束日期的限制条件：

created () {
         
    　　// 限制开始日期不能超过当前日期
        this.startDateDisabled.disabledDate = function (time) {
          return (time.getTime() + 24 * 3600 * 1000) > Date.now()
        }
    　　// 限制结束日期：当前日期往后的日期都不能选取
        this.endDateDisabled.disabledDate = function (time) {
          return time.getTime() > Date.now()
        }
      }

效果如下：

![1440803-20190910160009074-1827070648.png][]

因为我想要开始的日期是从今天及往后都不能选取，所以在time.getTime()后加一天的时间（即24\*3600\*1000），如果有其他的限制，根据自己的需要来进行调整即可

转载于:https://www.cnblogs.com/secretAngel/p/11425592.html

[1440803-20190828175735491-204648293.png]: /images/20230601/dbed0ebef73d49438bc9df40e05f579c.png
[1440803-20190910160009074-1827070648.png]: /images/20230601/d68d39ae5ebe4ae0b99eaefc276bff6c.png