How can I check react-datepicker value with react-hook-form?

Question

I have a register form and use react-hook-form for validation. I want to give an error message if under 15 years old. Is this possible?

here is the picker code

<DatePicker ref={ref} name="birthday" dateFormat="dd/MM/yyyy" disabled={disabled}
      selected={startDate || value}
      onChange={date => onChangePicker(date)}
      maxDate={addDays(new Date()), 1)}
      onFocus={() => { focusInput() }}
      onBlur={(e) => { blurInput(e) }}
      autoComplete="off"
      customInput={
        <MaskedInput
          mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
        />
      }
    />

and here in form

{errors.birthday && <span className="input__error-message birthday-error">Birthday is required</span>}
<Controller
    name="birthday"
    control={control}
    defaultValue={false}
    render={({ onChange, value }) => <Calendar label="Birthday" onChange={onChange} value={value} />}
    rules={{ required: true }}
    register={register}
/>

Answer 1

Yes, this is possible. You just have to use the validate function provided by the rules prop object.

const isOlderThan15Years = date => {...}

rules={{ required: true, validate: date => isOlderThan15Years(date) }}

Check the register section in the documentation for more information.