Блог

Главная - Вопросы по программированию - react-datepicker принимает более старые даты, которые отключены с помощью свойства minDate

react-datepicker принимает более старые даты, которые отключены с помощью свойства minDate

#reactjs #react-datepicker

#reactjs #react-datepicker

Вопрос:

Я использую react-datepicker точно так же, как показано ниже, имея свойство minDate.

 <DatePicker
  className="form-control"
  minDate={new Date()} 
  selected={this.props.GrantExpiryDate} 
  onChange={(e) => { this.props.onGrantExpiryDateSubmit(e); }} 
  disabled={disableControl} />
  {this.props.GrantExpiryDate == null ? <div className={styles.requiredValidation}>Please select a date</div> : ''}

Если я выберу дату с помощью DatePicker, она будет работать нормально, как показано на снимке.

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

но когда я ввел дату, вручную введя элемент управления выбора даты, это позволяет мне вводить более старые даты, которые отключены.

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

Я знаю, что это можно обработать с помощью пользовательской функции, но все же это не то поведение, которое я ожидал от свойства minDate.

Есть ли какое-либо свойство или что-то, чтобы преодолеть эту проблему.

Ответ №1:

попробуйте использовать это

 <DatePicker
  ...
  onChangeRaw={e => e.preventDefault()}
/>

Комментарии:

1. Да, я сделал это, но это также блокирует меня вводить дату вручную в виде текста.

2. Если вы хотите ввести дату, как насчет попытки обработать compare в onChnageRaw функции?

3. Это мой последний выбор, чтобы справиться с этим с помощью пользовательской функции. Если нет другого способа справиться с этим.

4. Я не уверен, я думаю, что это единственный способ для вас. minDate может предотвратить только выбранный не ввод.

5. Упс! затем я перейду к пользовательской функции, чтобы предотвратить эту проблему. вы также можете добавить эту функцию в свой ответ.