React-datepicker: включить установку даты, только если ему 18 лет и старше

У меня есть форма, в которой пользователь может отправить необходимую информацию

Одно из полей - дата рождения.

Я использую пакет реагировать на датупикер для этого конкретного поля

Фрагмент кода выглядит так:

        <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 лет, чтобы отправить форму?

Спасибо!

Вместо этого вы должны проверить, старше ли выбранная дата 18 лет или нет

Aseem Upadhyay 11.10.2018 14:22

@AseemUpadhyay Я пытался отключить пользователя в datepicker, в частности. Я пробовал ваше решение, и оно сработало для меня, но мне нужно ограничить даты только в datepicker

Rostyslav Skyba 11.10.2018 14:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
2
4 241
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Эту проблему можно решить на примере Конкретный диапазон дат.

<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)}

/>

Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и качественнее, и с большей вероятностью получат положительные отзывы.

Mark Rotteveel 21.06.2020 14:44

Приведенное выше решение не сработало для меня, я просто добавил ._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

Другие вопросы по теме