JAVASCRIPT

mui date picker

const DatePickerComponent = props => {
  const { name, label, control, require, defaultValue = new Date(), errors, format = 'dd/MM/yyyy' } = props

  return (
    <FormControl fullWidth sx={{ mb: 4 }}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Controller
          name={name}
          control={control}
          defaultValue={defaultValue}
          rules={{ required: !!require }}
          error
          render={({ field: { value, onChange } }) => (
            <DatePicker
              name={name}
              label={label}
              inputFormat={format}
              error={Boolean(errors[name])}
              value={value}
              onChange={onChange}
              renderInput={({error, ...params}) => <TextField {...params} error={error || errors[name] ? true : false} />}
            />
          )}
        />
      </LocalizationProvider>
      {errors[name] && <FormHelperText sx={{ color: 'error.main' }}>{errors[name].message}</FormHelperText>}
    </FormControl>
  )
}