首页 > 其他 > 详细

Ant Design中日期选择器的disabledDate用法

时间:2019-12-11 13:57:09      阅读:1089      评论:0      收藏:0      [点我收藏+]

ant design 组件库中  经常 用到了DatePicker日期组件,其中在遇到有具体条件日期范围的时候,需要注意几点,以下是几个例子:

1、前端自己规定日期

<DatePicker disabledDate={disabledDate} />



const disabledDate = (current) => {
return current && current < moment().endOf(‘day’);  // 当天之前的不可选,包括当天

return current < moment().subtract(29, ‘days‘) || current > moment(); //  当天之前30天内可选。其他不可选 当天也可选  
return current < moment().subtract(30, ‘day‘) || current &&current.endOf(‘day‘) > moment();      // 当天之前30天可选,其他不可选,当天也不能选
 };
2、接口传过来指定日期能选择,其余禁止
cronDateList为接口传递过来的日期数组
<DatePicker  size="large"  style={{width:‘100%‘}}  disabledDate={(current)=>disabledDate(current,cronDateList)} placeholder="请选择时间" />

const disabledDate = (current,arr) =>{
let ff = false;
ff =  !arr.some((son,index,arr) => {
return  current.isSame(son,‘day‘)
})
return ff;
};

Ant Design中日期选择器的disabledDate用法

原文:https://www.cnblogs.com/aloneindefeat/p/12021992.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!