Дизайн Ant, отключающий дату до сегодняшнего дня и другую пользовательскую дату

#javascript #reactjs #react-redux #antd

#javascript #reactjs #реагировать-redux #antd

Вопрос:

В настоящее время я использую ant design для своего проекта react и у меня возникли проблемы с модулем выбора даты. Я хочу отключить прошлые даты и некоторые другие, я также хочу отключить некоторые будущие даты. Допустим, я хотел отключить 2020-10-29, когда я добавляю следующим образом, он блокирует все даты. Ниже приведен мой модуль выбора даты.

 <DatePicker
   style= {{width: '100%'}}
   onChange = {this.handlePickupDate}
   placeHolder = "Select Delivery Date"
   disabledDate  = { 
       d => !d
         || d.isBefore(currentDate)
         || current < moment().endOf('day')
         || moment('2020-10-29')

   }
/>
  

если я добавлю moment("2020-10-29") , он заблокирует всю дату, как показано на следующем снимке экрана

введите описание изображения здесь

Без этого все выглядит нормально

введите описание изображения здесь

Итак, допустим, я хотел бы заблокировать 2020-10-29, 2020-10-29 и 2020-10-30 (технически эти значения будут поступать из api) как я могу заблокировать каждую отдельную дату?

Ответ №1:

Для будущих ссылок это ответ

 let blockDate = ['2020-10-23', '2020-10-28'];

<DatePicker
    style={{width: '100%'}}
    onChange={this.handlePickupDate}
    placeHolder="Select Delivery Pickup Date"
    disabledDate={ d => !d
                       || d.isBefore(currentDate)
                       || currentDate < moment().endOf('day')
       || blockDate.findIndex(date=>date===moment(d).format('YYYY-MM-DD')) !== -1}
/>