@progress/kendo-react-dateinputs

[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs&utm_content=banner) # KendoReact Date Inputs Library for React > **Important** > > - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—an enterprise-grade UI library with 120+ free and premium components. > - It contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs). You can use the free components without having to sign up or get a license key. > - If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free). > - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) to learn how to configure your KendoReact licensing. > - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs). > The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team! > > [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) and speed up your development process! 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. How to start: ```sh npm i @progress/kendo-react-dateinputs ``` What's in this package: - [React Date Inputs Components Library Features](#react-date-inputs-components-library-features) - [React Calendar Component (free)](#react-calendar-component) - [React DateInput Component (free)](#react-dateinput-component) - [React DatePicker Component (free)](#react-datepicker-component) - [React DateRangePicker Component (premium)](#react-date-range-picker-component) - [React DateTimePicker Component (free)](#react-datetimepicker-component) - [React MultiViewCalendar Component (premium)](#react-multiviewcalendar-component) - [React TimePicker Component (premium)](#react-time-picker-component) Additional information: - [Support Options](#support-options) - [Resources](#resources) - [KendoReact Date Inputs API](https://www.telerik.com/kendo-react-ui/components/dateinputs/api) ## 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](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—The KendoReact Date Inputs, as well as all 120+ components in the KendoReact suite, are styled in four polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines. ## React Calendar Component > This is a **free React component**—no sign-up or license required. [The KendoReactReact Calendar component](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs), part of KendoReact Free, 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. How to use the Calendar component in your apps: ```tsx import { Calendar } from '@progress/kendo-react-dateinputs'; ... <Calendar /> ``` ## React DateInput Component > This is a **free React component**—no sign-up or license required. [The KendoReact DateInput component](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) 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. How to use the DateInput component in your apps: ```tsx import { DateInput } from '@progress/kendo-react-dateinputs'; ... <DateInput /> ``` ## React DatePicker Component > This is a **free React component**—no sign-up or license required. [The KendoReact DatePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is part of KendoReact Free 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. How to use the DatePicker component in your apps: ```tsx import { DatePicker } from '@progress/kendo-react-dateinputs'; ... <DatePicker /> ``` ## React DateRangePicker Component > This is a KendoReact **premium component** and requires a commercial license or an active trial license. [The KendoReact DateRangePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) 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. How to use the DateRangePicker component in your apps: ```tsx import { DateRangePicker } from '@progress/kendo-react-dateinputs'; ... <DateRangePicker /> ``` ## React DateTimePicker Component > This is a **free React component**—no sign-up or license required. [The KendoReact DateTimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) 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. How to use the DateTimePicker component in your apps: ```tsx import { DateTimePicker } from '@progress/kendo-react-dateinputs'; ... <DateTimePicker /> ``` ## React MultiViewCalendar Component > This is a KendoReact **premium component** and requires a commercial license or an active trial license. [The KendoReact MultiViewCalendar component](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) 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. How to use the MultiViewCalendar component in your apps: ```tsx import { MultiViewCalendar } from '@progress/kendo-react-dateinputs'; ... <MultiViewCalendar /> ``` ## React Time Picker Component > This is a KendoReact **premium component** and requires a commercial license or an active trial license. [The KendoReact TimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) 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. How to use the TimePicker component in your apps: ```tsx import { TimePicker } from '@progress/kendo-react-dateinputs'; ... <TimePicker /> ``` ## 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](https://www.telerik.com/account/support-center/contact-us/technical-support?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs). - Product forums—The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) are part of the free support you can get from the community and from the KendoReact team. - Feedback portal—The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is where you can request and vote for new features to be added. ## Resources - [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) - [Getting Started with the KendoReact Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [API Reference of the KendoReact Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) - [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) High-level component overview pages - [React Calendar Component](https://www.telerik.com/kendo-react-ui/calendar) - [React DateInput Component](https://www.telerik.com/kendo-react-ui/dateinput) - [React DataPicker Component](https://www.telerik.com/kendo-react-ui/datepicker) - [React DateRangePicker Component](https://www.telerik.com/kendo-react-ui/daterangepicker) - [React DateTimePicker Component](https://www.telerik.com/kendo-react-ui/datetimepicker) - [React MultiViewCalendar Component](https://www.telerik.com/kendo-react-ui/multiviewcalendar) - [React TimePicker Component](https://www.telerik.com/kendo-react-ui/timepicker) _Copyright © 2025 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._