Kendo UI for Vue
The Kendo UI for Vue DatePicker allows the end-users to manually insert a date or intuitively pick one from a popup calendar. The component supports different locales and has a highly customizable interface.Kendo UI for Vue DatePicker – Overview Demo
By default Kendo UI for Vue DatePicker doesn’t have a selected value and the calendar popup is closed. Using the default-value and default-show props, we can pre-define the default value for the component and initially render it with an opened popup calendar.Kendo UI for Vue DatePicker – Default Value Demo
The popup calendar of the DateInput component always has a focused date that is rendered differently from the other dates in the calendar. The default highlighted date is today’s date but the component allows you to change the default focused date by passing a value to a single property.
For the scenarios in which the DatePicker needs to be disabled and the user’s input should be prevented, the component has a built-in configuration that not only disables it but also changes its design to visually indicate that the component is not in its default state.Kendo UI for Vue DatePicker – Disabled State Demo
The DatePicker can handle any past or future date out of the box. For the applications that require a narrower date range, the component can be configured to allow the selection of dates that are within a particular range. With this configuration, the component will limit what dates can be manually entered into it and also what dates can be navigated in its calendar.Kendo UI for Vue DatePicker – Date Limits Demo
The DatePicker accepts all valid date and time formats. If it is required by the application, the format can even be updated on the fly.
The Kendo UI for Vue DatePicker component has a built-in configuration option that allows the developer to show or hide a “week number” column, next to each week in the popup calendar.Kendo UI for Vue DatePicker – Week Number Column Demo
The DatePicker provides many customization options that allow you to create your unique component. While many of the options are available through props, there are scenarios in which the component needs a deeper level of customization. The DatePicker is designed with this complex customization in mind. It offers a custom rendered for every aspect of the UI component – DateInput, Calender, Popup, ToggleButton, and more. With these options available, the developer has the freedom to control the look and feel of every part of the DatePicker.
The Kendo UI for Vue DatePicker is probably the best choice for selecting a date value inside a form. On top of its default behavior, the component has built-in validation rules and styles and can prevent form submission if it is in an invalid state.Kendo UI for Vue DatePicker – Form Support Demo
The DatePicker component supports Globalization out of the box. With this feature, the date input placeholder and formats, together with the texts in the popup calendar, can be changed based on the locale of the user. The changes are applied automatically and there is no need to make any additional reconfigurations of the component.Kendo UI for Vue DatePicker – Globalization Demo
The Kendo UI for Vue DatePicker has different ways to select dates using just keyboard navigation - typing in the date input, incrementing the value of each slot of a date with the arrow keys, or opening the calendar and traversing through the displayed days to select a particular date. In addition to the keyboard navigation, the component is tested against the popular screen readers, providing full WAI-ARIA accessibility support and Section 508 compatibility.Kendo UI for Vue DatePicker – Keyboard Navigation Demo