antd RangePicker/DatePicker 动态满足多个条件禁用

Posted 哈娄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd RangePicker/DatePicker 动态满足多个条件禁用相关的知识,希望对你有一定的参考价值。

需求:

  1. 可选今日之前的时间
  2. 开始和结束时间区间不能超过30天

代码:

dom部分

 
<RangePicker
     allowClear
     disabledDate=disabledDate
     format='YYYY-MM-DD'
     placeholder=[ '起始日期', '结束日期' ]
     onCalendarChange=onDateChange
     onOpenChange=onOpenChange
/>

js部分

    const [ selectDate, setSelectDate ] = useState(null)  

   // 只能选昨天之前的时间
   const disabledDate = (current) => 
       // 昨天之前的时间可选择
       let bol = current && current > moment().subtract(1, 'days')
       if (selectDate) 
          // 时间区间为30天
          const dateRange30 = Math.abs(current.diff(selectDate, 'days')) > 30
          return dateRange30 || bol
         else 
            return bol
        
    
    const onOpenChange = (open) => 
        if (open) 
            setSelectDate(null)
        
    
    const onDateChange = (date) => 
        setSelectDate(date[0])
    

以上是关于antd RangePicker/DatePicker 动态满足多个条件禁用的主要内容,如果未能解决你的问题,请参考以下文章

antd的upload组件上传功能踩坑

antd相关升级问题

Antd:如何更改 Antd Form.Item 标签文本颜色?

antd 和 antd-mobile 同时加载

antd遇坑系列之<RangePicker/>

react+antd修改antd默认样式