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

近期项目由于要用到日、月、年可选范围控制在某年至昨天,开始用的是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
        }
      },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gzjiert

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值