A date picker component integrating mui's date picker with React Hook Form's form context. It uses the
Controller component from React Hook Form(RHF) and configures mui's
DatePicker to handle validations and more. I use this component instead of
DatePicker in all my forms.
- It inherits all the behaviours from
muiand accepts all
- It takes
defaultValuerequired props and registers the
DatePickerto the form context of RHF
- It has two modes: edit mode and read-only mode. In read-only mode, it is disabled, has no date picker icon button and is rendered as a standard(underline)
TextField. In edit mode, it is rendered as outlined
- It builds in the
requiredvalidation rule and takes a
- It builds in a validation rule for invalid date input
- It accepts validation rules and enforces them.
- It takes an optional
onChangeprop. It will update the value and trigger the given
onChangemethod on change.
- It has a default mask and date format and can be changed with props.
- It defaults to size small, full width and shrink label.
- It set time to end of the day.
- It takes a
styleprop for styling the underlying
matchMediais mocked so that the date picker can be rendered in desktop mode with the date picker icon button
TestComponentsets up a React Hook Form environment and shows how the SUT can be used.
FormForTestingis a testing utility component for testing React Hook Form form components.
- The tests are grouped into three categories: appearance, behaviours and validations.