Kendo UI for Angular Date Inputs Package (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar Components)
Important
- This package is part of Kendo UI for Angular—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
- You will need to install a license key when adding the package to your project. For more information, please refer to the Kendo UI for Angular My License page.
- To receive a license key, you need to either purchase a license or register for a free trial. Doing so indicates that you accept the Kendo UI for Angular License Agreement.
- The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
Start using Kendo UI for Angular and speed up your development process!
The Date Input Package is a collection of seven components designed to add date selection functionality to your applications. Whether you need date input fields or calendar pickers, everything is inside. Each component is highly customizable, high-performance, and well-documented.
What's Included in This Package:
Angular Calendar Component
The Angular Calendar Component renders a visual calendar used for date selection and navigation.
Key Features
- Calendar types—You can set the type of the Angular Calendar and choose between the default infinite layout and the classic rendering.
- Focused and selected dates—Control the focused and selected dates within the Calendar.
- Disabled dates—The Angular Calendar supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
- Fast navigation sidebar—By default a sidebar is placed to the side of the calendar for fast navigation, but you can customize it.
- Active view—Control the initially loaded page of the Calendar and render it in a month, year, decade, or year view.
- View selection depth—The Angular Calendar provides an option for setting the view depth to which the user can navigate.
- Selection modes—Apart form its default single selection mode, the Angular Calendar supports options for multiple, range, and week selection.
- Week number column—The Angular Calendar also supports options for rendering a column displaying the number of the weeks.
Angular DateInput Component
The Angular DateInput Component renders an input field that recognizes and enforces date formats.
Key Features
- Spin buttons—Enable spin buttons to increase or decrease the date value by adding or subtracting days.
- Incremental steps—Change the default step for increasing and decreasing the parts of its date values.
- Formats—Display the date value in its single format at all times or configure it to show the value in different formats when the input is focused or blurred.
- Placeholders—Show a text hint, a floating label, or descriptions for its format sections.
- Incomplete date validation—The incomplete date validation feature of the DateInput ensures that users do not accidentally leave a non-required field partially populated.
Angular DatePicker Component
The Angular DatePicker Component combines the DateIput and Calendar components to provide a interactive form element for picking dates. Users can pick a date from the calendar and it will appear as text in the DateInput field or they can type in a date and it will be automatically selected in the Calendar.
Key Features
- Calendar options—Use various options to configure the popup calendar within the Angular DatePicker—for example, switch between different calendar layouts, handle the animation of the calendar navigation, set the focused dates and the initially loaded calendar page, and more.
- Disabled dates—The Angular DatePicker supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
- Fast navigation sidebar—The Angular DatePicker supports configuration options for controlling the default navigation sidebar.
- Formats—Display the DatePicker in its single format at all times or configure it to show the value in different formats when the input is focused or blurred.
- Placeholders—Render a text hint or descriptions for its format sections.
- Incomplete date validation—The incomplete date validation feature of the DatePicker ensures that users do not accidentally leave a non-required field partially populated.
Angular DateRange Component
The Angular DateRange Component is a container that hosts start and end date input fields and popup calendars.
Key Features
- Selection of dates and ranges—Allow users to select single dates or date ranges from a popup calendar.
- Popup options—Customize the popup calendar with options for visibility, alignment, position, and more.
- Date range auto correction—Ensure quality UX through automatic correction of date range formats.
Angular DateTimePicker Component
The Angular DateTimePicker Component combines the DateIput, Calendar, and TimePicker components to provide a interactive form element for picking dates and specific times.
Key Features
- Calendar options—Configure the popup calendar by switching between different calendar layouts, handling the animation of the calendar navigation, setting the focused dates, and more.
- Date and time ranges—Date and time ranges can be defined by setting a start and end date for a period of time.
- Disabled dates—The Angular DateTimePicker supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
- Formats —Display the DateTimePicker in its single format at all times or configure it to show the value in different formats when the input is focused or blurred.
- Placeholders—The DateTimePicker provides options for setting its input field and render a text hint, a floating label, or descriptions for its format sections.
- Incremental steps—The DateTimePicker enables you to change the default step for increasing and decreasing the parts of its date values.
- Popup options—Customizing the calendar popup through various configuation options such as toggling the cancel button.
Angular MultiView Calendar
The Angular MultiView Calendar renders multiple caleandars in one container for the purposes of selecting and navigating dates. It is most often used for setting start and end dates.
Key Features
- Focused and selected dates— Control the focused and selected dates within the MultiViewCalendar.
- Disabled dates— The MultiViewCalendar supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
- Date ranges— Display a start-end date period as a selection range.
- Active view— Control the initially loaded page of the Calendar and render it in a month, year, decade, or year view.
- Multiple views— Control the number of the horizontally rendered MultiViewCalendar views.
- View header— Rrender a header for each view.
- View selection depth— The MultiViewCalendar provides an option for setting the view depth to which the user can navigate.
- Navigation animation— Enable navigation animation for the MultiViewCalendar.
- Week number column— Render a column displaying the number of the weeks.
Angular TImePicker Component
The Angular TImePicker Component is an input field that combines text input and spinner controls to give users a choice in how they would like to enter time data.
Key Features
- Time ranges —Time ranges can be defined by setting a start and end time value.
- Incremental steps — The TimePicker enables you to change the default step for increasing and decreasing the parts of its time values.
- Formats — Control the format of the TimePicker by using its format property.
- Placeholders — The TimePicker provides options for setting its input field and render a text hint or descriptions for its format sections.
Angular Date Inputs Package Common Features
The following features are aviable across all the components in this package:
- Forms Support—The package provides support both for asynchronous template-driven Angular forms and predominantly synchronous reactive Angular forms. This feature allows you to draw on the logic set either in the template, or in the component or typescript code.
- Date and Time Ranges— Except for the MultiViewCalendar, all Date Inputs provide configuration options for setting a start and end date or time and, in this way, defining date or time ranges.
- Disabled Date Inputs— You can choose to render the Date Inputs in their disabled state so that they are read-only.
- Templates— Customize the content and the general look and feel of the calendar-based Date Inputs by utilizing ready-to-use templates and applying them to the individual cells of the components—for example, to the month, year, decade, or century calendar cells.
- Integration with JSON—As the components only wprk with date JavaScript instances while the received data from the server is serialized in a JSON format, the component provides options for binding it to dates which are serialized as strings.
- Globalization— The included components support globalization to ensure that they can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Date Inputs support rendering in a right-to-left (RTL) direction.
- Accessibility— The Date Inputs are accessible for screen readers and support WAI-ARIA attributes.
- Keyboard Navigation— The Date Inputs support a number of keyboard shortcuts which alow users to accomplish various commands.
Resources
Questions and Feedback
Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.
