Forms Support
The React DatePicker component supports a native KendoReact implementation of HTML5 form validation.
The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.
This is a Free React DatePickerThe KendoReact DatePicker is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.Functionality and Features
- Setting minimum validation requirements
- Setting custom validation messages
- Overriding the validity state
- Disabling the visual representation of the validity state
Setting Validation Requirements
The DatePicker supports props for setting basic validation requirements—for example, the minimum and maximum date. The min, max, and required properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.
Setting Custom Validation Messages
You can implement custom error messages which will be displayed when the DatePicker is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.
Enforcing the Validity State
The DatePicker enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the valid prop.
Disabling the Validation Styling
By default, to achieve a visual representation of its invalid state, the DatePicker applies the k-invalid class name to the wrapping component. To disable the utilization of k-invalid, set the validityStyles property to false.