@progress/kendo-react-dateinputs

KendoReact Date Inputs Library for React

Important

• This package is а part of KendoReact—a commercial UI library.
• You will need to install a license key when adding the package to your project. For more information, please refer to the KendoReact 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 KendoReact License Agreement.
• The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!

Start using KendoReact and speed up your development process!

What's in this package (ToC):

• KendoReact Date Inputs Library for React
  • React Calendar Component
  • React DateInput Component
  • React DatePicker Component
  • React Date Range Picker Component
  • React DateTimePicker Component
  • React MultiViewCalendar Component
  • React Time Picker Component
  • React Date Inputs Components Library Features
  • Support Options
  • Resources

The React Date Inputs, part of KendoReact, offer a highly customizable interface for users to navigate between dates and date ranges, to enter and pick time and date slots, and more. All KendoReact Date Inputs support different locales.

React Calendar Component

The KendoReactReact Calendar component, part of KendoReact, is a form component representing a Gregorian calendar, allowing users to intuitively select a single date, or date ranges, with a few clicks. The Fast Navigation Bar of the React Calendar provides a shortcut to quickly navigate through years and months without having to leave the context of the main calendar interface of selecting a particular day of the month. The number of the week can be an easy way to discuss upcoming vacations or events.

React DateInput Component

The KendoReact DateInput component is a perfect input component for handling quick and efficient date values. The Spin Buttons of the React DateInput, enabled by a single property, quickly increases or decreases the currently selected portion of the date. The React DateInput supports adding floating labels as part of its input.

React DatePicker Component

The KendoReact DatePicker component is part of KendoReact and offers a highly customizable interface for end users to enter and pick dates supporting different locales. The React DatePicker component supports an input element for manual insertion of a date, the component also features a popup calendar to select dates in a more intuitive and visually pleasing way.

React Date Range Picker Component

The KendoReact DateRangePicker component is part of KendoReact and offers a highly customizable interface for end users to select a range of dates spanning over multiple calendars. There may be several cases where a user would need to select the end date first and then select the start date. For this scenario, the React DateRangePicker features built-in logic to autocorrect the selection of its calendars to ensure that the start value is always before the end value.

React DateTimePicker Component

The KendoReact DateTimePicker component is part of KendoReact and combines the ability to select both a date and a specific time of day through a highly-customizable component. The React DateTimePicker supports adding floating labels as part of its input. The KendoReact DateTimePicker can handle the full 24-hour clock and can select from any day in the past or the future, which may be too broad of a range for your application.

React MultiViewCalendar Component

The KendoReact MultiViewCalendar component offers a user interface with multiple calendars side by side to enable end users to select a range of dates spanning over multiple months. With the Multiple Views feature, any number of calendars can be added to the collection of displayed calendars. Thanks to the reverse range selection feature of the React MultiViewCalendar, no matter which order dates are selected, the component will always keep track of the start and end dates.

React Time Picker Component

The KendoReact TimePicker component provides an intuitive interface for entering or selecting any time of day. For scenarios that need to limit the time slots that the KendoReact TimePicker offers to users, there are min and max configuration options to help limit the range of time slots available. The React TimePicker supports adding floating labels as part of its input.

React Date Inputs Components Library Features

Among the many features which the KendoReact Date Inputs deliver are:

• Setting the default value—Easily configure the initial value that the Date Inputs render.
• Form validation—Validate input values, set validation requirements (such as minimum and maximum date or time) and prevent the submission of forms which are in an invalid state.
• Formats and placeholders—Control the date and time format and implement placeholders for the input field, including custom formats.
• Controlled state—Control the date and time value and popup state of the Date Inputs.
• Disabled state—To disable user input, just change a single property.
• JSON integration—You can also bind the Date Inputs to dates or times which are serialized as strings.
• Custom rendering—You can replace the input field, calendar and popup child components with custom ones.
• Date limits—Enable the user to pick a date or time within a predefined min and max date or time range.
• Focused dates and times—Configure the initial date or time value the Date Inputs display.
• Accessibility support—The Date Inputs are compliant with WAI-ARIA and Section 508.
• Theme support—The KendoReact Date Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.

Support Options

For any issues you might encounter while working with the KendoReact Date Inputs, use any of the available support channels:

• Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the dedicated KendoReact support system.
• Product forums—The KendoReact forums are part of the free support you can get from the community and from the KendoReact team.
• Feedback portal—The KendoReact feedback portal is where you can request and vote for new features to be added.

Resources

• Getting Started with KendoReact
• Getting Started with the KendoReact Date Inputs
• API Reference of the KendoReact Date Inputs
• KendoReact Roadmap
• Blogs
• Demos, documentation, and component reference
• KendoReact pricing and licensing
• Changelog

High-level component overview pages

• React Calendar Component
• React DateInput Component
• React DataPicker Component
• React DateRangePicker Component
• React DateTimePicker Component
• React MultiViewCalendar Component
• React TimePicker Component

Copyright © 2024 Progress Software Corporation and/or 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.