CODEWITHSUNDEEP
reactjsmaterial-uireact-hook-form
shrekDeep
shrekDeep

Reputation: 2328

How to validate KeyboardDatePicker with react-hook-form when date is invalid

I am validating a material UI KeyboardDatePicker with react-hook-form:

            <Controller
          name="endDate"
          control={control}
          defaultValue={new Date()}
          rules={{
            required: "End date is required"
          }}
          render={({ field, fieldState }) => {
            return (
              <KeyboardDatePicker
                autoOk
                variant="inline"
                inputVariant="standard"
                label="End Date"
                format="MM/dd/yyyy"
                value={field.value}
                InputAdornmentProps={{ position: "start" }}
                onChange={() => {
                  field.onChange();
                }}
                error={(!!fieldState.error || field.value === 'Invalid Date')}
                helperText={
                  fieldState.error ? fieldState.error.message : null
                }
              />
            );
          }}
        />

It works fine and throws the message "End date is required" if KeyboardDatePicker is empty. However I also need to throw an error message "Invalid date format" if user edits the date and removes a couple of characters like '06/01/2021' to '06/01/20__'. This functionality works built-in and works fine in isolation i.e. if I don't combine date picker with react-hook-form. However I am not getting how to achieve this in combination with react-hook-form. I tried to modify helperText but to no avail.

Upvotes: 0

Views: 4956

Answers (1)

Olivier
Olivier

Reputation: 148

This is how I do it :

 <Controller
    name="endDate"
    control={control}
    defaultValue={new Date()}
    rules={{ required: true }}
    render={({ field: { ref, ...rest } }) => (
      <KeyboardDatePicker
        margin="normal"
        id="date-picker-dialog"
        format="dd/MM/yyyy"
        disablePast={true}
        initialFocusedDate={Date.now()}
        KeyboardButtonProps={{
           "aria-label": "change end date",
        }}
        invalidDateMessage={"End date is required"}
        {...rest}
      />
    )}
  />

Upvotes: 1

Related Questions