The Kendo UI for Vue DateTimePicker is a component that provides an intuitive and user-friendly interface for selecting a specific day and time of the day. The users can choose day and time from a popup list that appears under the component or manually insert values in its input. With its various customization options, the DateTimePicker allows the developers to implement the date/time selection scenario they need.See Kendo UI for Vue DateTimePicker Overview example
Sometimes the interaction with the DateTimePicker should be disabled for the users. For these scenarios, the component provides a visible indication of its disabled state. By controlling the value of a single property, we can enable or disabled the DateTimePicker on the fly.Kendo UI for Vue DateTimePicker Disabled state demo
The DateTimePicker always has a date in its popup calendar that is displayed differently. This date is called a “focused date”. By default, the focused date is today’s date but the focus can be set to any other date using a single configuration property.
The Kendo UI for Vue DateTimePicker works with all available hours(24-hour clock) and all past or future dates. When you don’t need a wide date and/or time range, the component’s limiting functionality can set the date and time slots that the users can select or enter. With this range limitation, the users can’t select or enter values that are beyond the defined boundaries.
The DateTimePicker supports all standard date and time strings and can display them in various formats configured by the developer.
The placeholder functionality is essential when you work with a date and time in a single component. The DateTimePicker allows the developer to use any valid format string to define how the date and time values will be displayed.
The Kendo UI for Vue DateTimePicker has built-in globalization support. With this functionality, the data and text displayed in the component are localized based on the end users’ preferences.
When your scenario requires the submission of a form that contains date and time values, the Kendo UI for Vue DateTimePicker is the component you can rely on because:
The DateTimePicker works in both controlled and uncontrolled modes. When the component is in uncontrolled mode, its form data is handled by the DOM. When working in a controlled mode, DateTimePicker’s form data is handled by the Vue component. By default, the component works in uncontrolled mode. The switch to controlled mode can be done by a single configuration option.Kendo UI for Vue DateTimePicker Controlled Mode example
The implementation of the DateTimePicker component follows the WAI-ARIA and Section 508 standards. It is accessible by screen readers and other assistive technologies. The component also has an integrated Keyboard Navigation. This navigation enables the opening of its popup, the selection of date and time, and the updating of its value using just the keyboard.Kendo UI for Vue DateTimePicker Keyboard Navigation example