Date min and date max input in string format is not running

[julio3266]

I need to pass a minimum date and a maximum date so that the input does not accept a certain date, but when I enter the minimum and maximum date it does not detect validation

https://codesandbox.io/s/react-hook-form-js-forked-gbsf9?file=/src/App.tsx

[Moshyfawn]

You're using the wrong validation attributes. maxLength and minLength are the type="text" input attributes. HTML5 forms API doesn't have any type="date" validation API.

What you can do is to utilize the RHF validate callback and provide multiple validation functions in a form of object for ease of use. Something like this:

rules={{
  validate: {
    minDate: (date) =>
      isAfter(new Date(date), new Date("1993/11/11")) ||
      "Please, enter a date after 1993/11/11",
    maxDate: (date) =>
      isBefore(new Date(date), new Date("2022/25/07")) ||
      "Please, enter a date before 2022/25/07"
  }
}}

[julio3266]

@Moshyfawn its worked for me, thanks. But i have a one more question, if i have use this role for yup resolver. How would it be validate using minDate and maxDate?

[Moshyfawn]

I don't use Yup anymore, but from what I remember, you can chain the date().min() and date().max() operators for that. Please, refer to Yup's docs on these operators for dates to learn more