RHFDateTimePicker

RHFDateTimePicker extends DateTimePicker component, allowing users to select the date and time for an event.

info

RHFDateTimePicker uses uses dayjs as its default adapter. To switch to a different date adapter, please refer the customization guide.

Usage

import { RHFDateTimePicker, RHFDateTimePickerProps } from '@nish1896/rhf-mui-components';

<RHFDateTimePicker
  fieldName="departureOfFlight"
  register={register}
  setValue={setValue}
  errorMessage={errors?.departureOfFlight?.message}
/>

Examples

• RHFDateTimePicker Example
• DateTimePicker
• Complete Form

API

RHFDateTimePickerProps extends DateTimePickerProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process.
register	UseFormRegister	✅	The register option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options if using react-hook-form without any validation libraries like yup or Joi.
setValue	(name: string, value: unknown, config?: Object) => void	✅	The setValue option yielded on calling the useForm hook.
onValueChange	(newValue: unknown) => void		An optional callback function which returns the selected date or time value.
showLabelAboveFormField	boolean		Render form label above the form field in FormLabel component.
formLabelProps	FormLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperText	ReactNode		Optional helperText to render under RHFSelect or RHFNativeSelect field.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		Prevent replacing of form HelperText by error message during validation trigger.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.