У меня есть форма, в которой пользователь может отправить необходимую информацию
Одно из полей - дата рождения.
Я использую пакет реагировать на датупикер для этого конкретного поля
Фрагмент кода выглядит так:
<label>
<DatePicker
autoComplete='off'
dateFormatCalendar = "MMMM"
showYearDropdown
scrollableYearDropdown
onChange = {this.handleChangeEvent}
selected = {this.state.formData.dob}
maxDate = {moment().subtract(6570, "days")}
minDate = {moment()}
placeholderText = "Date of birth"
name = "dob"
customInput = {
<Input type='text' onKeyPress = {e => e.preventDefault()} validations = {[required]} value = {this.state.formData.dob} />
}
/>
</label>
6570 = 18 * 365 дней, преобразованных из 18 лет, я знаю, что это не твердое значение, потому что также есть 364 дня
Вот скриншот для datepicker, который не может выбрать дату
https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21
Любые мысли или рекомендации, как можно достичь того, чтобы пользователю было не менее 18 лет, чтобы отправить форму?
Спасибо!
@AseemUpadhyay Я пытался отключить пользователя в datepicker, в частности. Я пробовал ваше решение, и оно сработало для меня, но мне нужно ограничить даты только в datepicker
Эту проблему можно решить на примере Конкретный диапазон дат.
<DatePicker
selected = {this.state.startDate}
onChange = {this.handleChangeEvent}
minDate = {moment().subtract(500, "years")}
maxDate = {moment().subtract(18, "years")}
showDisabledMonthNavigation
/>
Вы можете проверить рабочую демонстрацию на codeandbox.io.
<DatePicker
selected = {this.state.startDate}
onChange = {this.handleChangeEvent}
dateFormat = "dd/MM/yyyy"
showMonthDropdown
showYearDropdown
dropdownMode = "select"
maxDate = {subYears(new Date(), 18)}
/>
Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и качественнее, и с большей вероятностью получат положительные отзывы.
Приведенное выше решение не сработало для меня, я просто добавил ._d после moment (). Subtract (18, "years"), чтобы обрезать только дату.
мой последний код:
<DatePicker
selected = { selectedDate }
onChange = { date => setSelectedDate(date) }
dateFormat='dd/MM/yyyy'
maxDate = {moment().subtract(18, 'years')._d}
showYearDropdown
scrollableYearDropdown
/>
Если вы пришли сюда, чтобы отреагировать на родных, позвольте мне сэкономить вам время. Реквизит:
minimumDate = {new Date(moment().subtract(150, "years"))}
maximumDate = {new Date(moment().subtract(18, "years"))}
Я знаю, что немного опаздываю на эту тему> но недавно я тоже застрял с этой проблемой если вы хотите установить диапазон для выбора даты, я придумал это решение
<DatePicker
showYearDropdown
dateFormatCalendar = "MMMM"
yearDropdownItemNumber = {150}
minDate = {moment().subtract(150, "years")._d}
maxDate = {moment().subtract(18, "years")._d}
scrollableYearDropdown
/>
Для получения ответа rangeLocked необходимо добавить параметр Min / Max и yearDropdownItemNumber.
Надеюсь, это поможет кому-то, кто ищет rangeLock
Вместо этого вы должны проверить, старше ли выбранная дата 18 лет или нет