Adding DateInput Spinners to DatePicker
Environment
| Product Version | 8.0.0 |
| Product | Progress® KendoReact DatePicker |
Description
I extensively use the DatePicker component in our application for entering weather data. It's often required to adjust the date by a day or two, and opening the entire calendar for such small adjustments can be cumbersome. Ideally, having Spin Buttons on the DatePicker, similar to those on the DateInput, would enhance the user experience. This setup would offer both the calendar view and spinners, allowing users to select the method that suits them best.
This KB article also answers the following questions:
- How can I add spin buttons to the DatePicker component?
- Is it possible to adjust DatePicker dates without opening the calendar?
- Can the DatePicker component include DateInput spinners for date adjustments?
Solution
To integrate spin buttons into the DatePicker component, custom render its date input component. The DatePicker internally uses the DateInput component by default, which supports spinners. Customize the DatePicker's date input component to include spinners by setting the dateInput prop to a custom component that returns the DateInput with its spinners prop enabled.
Below is an example demonstrating this customization:
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, DateInput } from '@progress/kendo-react-dateinputs';
const CustomDateInput = (props) => {
return <DateInput {...props} spinners={true} />;
};
const App = () => {
return <DatePicker dateInput={CustomDateInput} />;
};For a complete implementation, refer to this StackBlitz example: React DatePicker with DateInput Spinners.
For additional information on customizing the DatePicker, visit the official documentation on Custom Rendering of the DatePicker.