RHFTimePicker

RHFTimePicker extends the TimePicker component to allow users to select time for an event.

Usage

import RHFTimePicker, { RHFTimePickerProps } from '@nish1896/rhf-mui-components/mui-pickers/time';

<RHFTimePicker
  fieldName="wakeUpTime"
  register={register}
  setValue={setValue}
  errorMessage={errors?.wakeUpTime?.message}
/>

Examples

• RHFTimePicker
• TimePicker
• Complete Form

API

RHFTimePickerProps extends TimePickerProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
register	UseFormRegister	✅	The register option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation 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.
label	ReactNode		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
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		The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.