React-datepicker: enable to set date only if it 18 years old and above

Question

I have a form where a user can submit some info needed

One of the fields is a Date of Birth

I am using react-datepicker package for that specific field

A piece of code looks like this:

        <label>
          <DatePicker
            autoComplete='off'
            dateFormatCalendar="MMMM"
            showYearDropdown
            scrollableYearDropdown
            onChange={this.handleChange}
            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 are days converted from 18 years, I know it's a not a solid one, because there are a 364 days also

Here is a screenshot for datepicker not being able to choose a date

https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21

Any thoughts or recomendations how can achieve how user can be at least 18 yo to submit a form?

Thank you!

Tea

you should instead check if the selected date is above 18 year old or not – Furbelow

@AseemUpadhyay I was trying to disable user within datepicker in specific. I've tried your solution and it worked for me, but I need to restrict dates within datepicker only – Tea

Answer 1

This issue can be resolved by using Specific date range example.

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    minDate={moment().subtract(500, "years")}
    maxDate={moment().subtract(18, "years")}
    showDisabledMonthNavigation
/>

You may check the working demo on codesandbox.io.

Leuko

Answer 2

The solution above wasn't working for me, I just added ._d after moment().subtract(18, "years") to trim only the date.

my final code:

 <DatePicker
        selected={ selectedDate }
        onChange={ date => setSelectedDate(date) }
        dateFormat='dd/MM/yyyy'
        maxDate={moment().subtract(18, 'years')._d}
        showYearDropdown
        scrollableYearDropdown
      />

Coridon

Answer 3

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    dateFormat="dd/MM/yyyy"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    maxDate={subYears(new Date(), 18)}

/>

Leach

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Morbidity

Answer 4

I know I am a bit late for this thread > but recently I also got stuck with this problem if you want to set a range for date-picker I came up with this solution

            <DatePicker
              showYearDropdown
              dateFormatCalendar="MMMM"
              yearDropdownItemNumber={150}
              minDate={moment().subtract(150, "years")._d}
              maxDate={moment().subtract(18, "years")._d}
              scrollableYearDropdown
            />

Min/Max and yearDropdownItemNumber option need to be added to get rangeLocked response

I hope it will help someone looking for rangeLock

Zetes

Answer 5

I set the min and max age validation without using any third-party libraries like moment. This is the solution.

The important thing is selected, minDate, MaxDate properties type should be Date object type, not be the string type.

=== FUNCTION PART ===

const MAX_AGE = 100;
const MIN_AGE = 18;

const getMinAndMaxDateForDob = () => {
    const currenTime = new Date();
    const currentYear = currenTime.getFullYear();
    const currentMonth = currenTime.getMonth();
    const minYear = currentYear - MAX_AGE;
    const maxYear = currentYear - MIN_AGE;
    const minDate = new Date(`${minYear}-${currentMonth}-01`);
    const maxDate = new Date(`${maxYear}-${currentMonth}-01`);
    return {minDate, maxDate};
 }

=== REACT COMPONENT PART ===

    <DatePicker 
       selected={new Date(state.editedDob)}
       minDate={getMinAndMaxDateForDob().minDate}
       maxDate={getMinAndMaxDateForDob().maxDate}
       dateFormat="yyyy/MM/dd"
       peekNextMonth
       showMonthDropdown
       showYearDropdown
       dropdownMode="select"
       onChange={(date) => setDate(date)}
     />

Gang

Answer 6

If you came here for react native, let me save you some time. The props are:

minimumDate={new Date(moment().subtract(150, "years"))} 

maximumDate={new Date(moment().subtract(18, "years"))}

Oler

minimumDate={moment().subtract(100, "years")._d} maximumDate={moment().subtract(18, "years")._d} – Cimex