реакция-выбора даты, проблемы с отключением определенной даты - PullRequest
Новая
       20

реакция-выбора даты, проблемы с отключением определенной даты

0 голосов
/ 03 апреля 2019

Я использую response-datepicker для реализации даты и календаря. Он работает нормально. Я успешно интегрировал компонент, но столкнулся с одной проблемой при отключении даты по умолчанию. Я использую следующий код. 

<DatePicker customInput={<ExampleCustomInput />} className="w-dtsr-date-picker"
  selected={this.state.startDate}  //called when the date is clicked
  onChange={this.handleChange}    //called only when the value is chnaged
  monthsShown={2}     //number of months to be shown
  minDate={this.props.dateProps.minDate}  //min days to be shown in the calendar
  maxDate={this.props.dateProps.maxDate}  //max days to be shown in the calendar
  onChangeRaw={this.handleDateChangeRaw}  //preventing the user from manually entering the dates or text in the input text box
/>

по умолчанию говорят, что я хочу отключить 25.04.2009, я не могу это сделать, я вижу, что компонент имеет свойство с именем dayClassName , кто-нибудь использовал это, я не уверен, как передать дату и применить CSS к этой конкретной дате.

Это то, что я нашел в одном из примеров - 

dayClassName={date => getDate(date) < Math.random() * 31 ? 'random' : undefined}

У меня не сработало, не уверен, как отключить эту конкретную дату (25.04.2009), какая-нибудь помощь по этому вопросу .?

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Вы должны иметь возможность использовать опору dayClassName, чтобы отключить определенную дату и передать класс CSS своего создания, который отключает щелчки пользователей. dayClassName возвращает дату JS, поэтому вам придется сравнить ее с датой, которую вы хотите отключить, а затем передать отключенное имя класса CSS, если оно true

Пример:

Prop: 

dayClassName={date => date.getTime() === new Date('04/25/2019').getTime() ? 'disabled-date' : undefined}

CSS: 

.disabled-date {
  pointer-events: none;
}
0 голосов
/ 03 апреля 2019

можно попробовать с реквизитом 

dayPickerProps={{
       disabledDays={[
            new Date(2017, 3, 12),
            new Date(2017, 3, 2)
          ]}
}}

или напрямую используя реквизит как 

disabledDays={[
        new Date(2017, 3, 12),
        new Date(2017, 3, 2)
    ]}

Редактировать: извините, неправильно прочитал DatePicker как DayPicker. вышесказанное относится к компоненту DayPicker.

Редактировать 2: Согласно документации вы пробовали с проп 

excludeDates={[new Date(), subDays(new Date(), 1)]}
...