elementUI el-date-picker 可选范围控制pickerOptions

最新推荐文章于 2024-06-20 09:23:17 发布

原创最新推荐文章于 2024-06-20 09:23:17 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #html5

前端专栏收录该内容

10 篇文章

订阅专栏

这篇博客讲述了作者在Vue项目中遇到的antdforvue日期选择器（a-range-picker）在mode为month和year时无法正确限制日期范围的问题。作者尝试了升级和使用单独组件的解决方案，但最终选择了使用elementUI的el-date-picker来实现日、月、年的范围选择，并成功应用了禁用日期功能。代码示例展示了如何配置el-date-picker以限制日期范围在2016年3月1日至当前日期前一天。

近期项目由于要用到日、月、年可选范围控制在某年至昨天，开始用的是antd for vue的a-range-picker 经历一堆改造把mode为month、year时面板点击无法关闭问题解决后，发现当mode为month、year设置disableDate无效，测试antd 4.x的正常，而我这用的是antd for vue 1.x的不想升级到3.x(antd for vue 2.x也无效)，又不想单独用两个分开的a-date-picker，从而转向使用elementUI的el-date-picker。
效果图
在这里插入图片描述

<el-date-picker
     style="width:220px;"
      v-model="value1"
      size="mini"
      type="daterange"
      range-separator="-"
      :picker-options="pickerOptions"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
</el-date-picker> &nbsp;&nbsp;&nbsp;
<el-date-picker
      style="width:220px;"
      v-model="value1"
      size="mini"
      type="monthrange"
      range-separator="-"
      :picker-options="pickerOptions"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
</el-date-picker> &nbsp;&nbsp;&nbsp;
<el-date-picker
      style="width:220px;"
      v-model="value1"
      size="mini"
      type="yearrange"
      range-separator="-"
      :picker-options="pickerOptions"
      start-placeholder="开始年份"
      end-placeholder="结束年份">
</el-date-picker>

	  value1: '',
      value2: '',
      value3: '',
      pickerOptions: {
      disabledDate (time) {
        return time.getTime() <= new Date('2016-03-01').getTime() ||  time.getTime() > Date.now() - 8.64e6
        }
      },