element ui el-date-picker日期时选择器设置只能选择不大于30天时间范围

最新推荐文章于 2024-06-24 14:35:59 发布

江拥羡橙

最新推荐文章于 2024-06-24 14:35:59 发布

阅读量999

点赞数 8

分类专栏： # vue 文章标签： ui vue.js 前端

本文链接：https://blog.csdn.net/qq_37215621/article/details/135083065

版权

vue 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

文章详细描述了如何在Vue项目中使用ElementUI的date-picker组件实现日期范围选择，并设置了最小和最大日期限制，以及自定义的disabledDate函数。

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

 <el-date-picker
                v-model="ceaseDate"
                :picker-options="pickerOptions"
                style="min-width: 350px;"
                size="small"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>

pickerMinDate: null,
      pickerMaxDate: null,
      pickerOptions:{
        onPick: ({ maxDate, minDate }) => {
         if (minDate) {
          this.pickerMinDate = minDate.getTime();
         }if (maxDate) {
          this.pickerMaxDate = maxDate.getTime();
         }
       },
       disabledDate: (time) => {
         if (this.pickerMinDate) {
           return time.getTime() > (this.pickerMinDate + 29*24*3600*1000) || time.getTime() < (new Date().getTime() - 24*3600*1000);
         }
         else{
           return time.getTime() > (new Date().getTime() + 29*24*3600*1000) || time.getTime() < (new Date().getTime() - 24*3600*1000);
         }
       }
      },