鱼塘码农

菜鸟学习记录
鱼海无涯

Ant Design Vue a-date-picker 日期选择器加可选时间限制

如何给Ant Design Vue时间选择器添加可选时间的限制

<a-date-picker
  format="YYYY-MM-DD"            //定义时间格式
  :disabled-date="disabledDate"  //通过设置 disabledDate 方法,来约束开始和结束日期
>
</a-date-picker>

js部分

disabledDate(current) {         //传入参数为固定写法
  return (
  current < moment(this.item.planStartDate) ||           
  //设置不可选择的时间,current小于开始日期的含义是小于该日期的不可选择
  current > moment(this.item.planEndTime).add(1, 'days')
  //原以为current大于结束日期可以限制结束日期之后的日期不可选择,实际操作的时候发现结束日期当天也不可选择了,所以用moment的add方法加一天。
  );
},

传入开始时间和结束时间是2020年12月4日-5日的效果:
QQ截图20201130163839.jpg

文章内容可能来自网络,纯为学习使用,若有侵权,请联系我删除 | 当前页面:鱼塘码农 » Ant Design Vue a-date-picker 日期选择器加可选时间限制

评论