background

KendoReact

React DateTimePicker

  • This highly customizable component makes picking the date and time as easy as a couple of clicks.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
DateTimePicker Header
  • Enable Users to Easily Pick Date and Time in a Single UI Component

    The React DateTimePicker component, part of KendoReact, combines the ability to select both a date and a specific time of day through a highly-customizable component. Users can quickly type in a date and time in the input of the component, or work with the calendar and time picker that appear in a popup to make picking the date and time as easy as a couple of clicks.

    See React DateTimePicker Overview demo

    React DateTimePicker – Overview, KendoReact UI Library
  • Disabled DateTimePicker

    Certain requirements will call for the KendoReact DateTimePicker to be disabled and provide a visual indication that the component cannot be interacted with. Through a single property, which can be updated on the fly, the DateTimePicker can switch between enabled and disabled states.

    See React DateTimePicker Disabled demo

    React DateTimePicker – Disabled, KendoReact UI Library
  • Default Value

    By default, the value of the KendoReact DateTimePicker is empty and the popup containing the calendar and time picker only appears when the component is interacted with. Through a couple of configuration options, the React DateTimePicker can initially render with the popup already open, and the default value of both the date and time can already be defined.

    See React DateTimePicker Default Value demo

    React DateTimePicker – Default Value, KendoReact UI Library
  • Focused Dates

    The calendar featured in the KendoReact DateTimePicker always has a focused date, a date that is highlighted and rendered differently from other dates on the calendar. By default, this is today’s date, but focus can be applied to any other date through a single property.

    See React DateTimePicker Focused Dates demo

    React DateTimePicker – Focused Dates, KendoReact UI Library
  • Date and Time Limits

    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. With the Date and Time Limit feature, the React DateTimePicker can limit the available dates and time slots that users can select from, and also prevent users from typing in values outside of these ranges.

    See React DateTimePicker Date and Time Limits demo

    React DateTimePicker – Date and Time Limits, KendoReact UI Library
  • Formats

    Date and time can be represented in various formats and the KendoReact DateTimePicker is ready to handle them all thanks to support for valid standard date and time format strings.

    See React DateTimePicker Formats demo

    React DateTimePicker – Formats, KendoReact UI Library
  • Appearance

    The KendoReact DateTimePicker component provides a set of predefined styling options enabling you to configure each individual aspect of the component appearance.

    See the DateTimePicker Appearance demo

  • Floating Label

    The React DateTimePicker supports adding floating labels as part of its input. This feature displays an initial message within the component, which then floats outside the component when the user enters the input. The floating label is then replaced by the mask of the component, ensuring that users are aware of the content format they should adhere to.

    See React DateTimePicker Floating Label demo

    React DateTimePicker Floating Label
  • Placeholders

    When dealing with dates and time using a placeholder to indicate to the user exactly what kind of date of format the component is expecting can be extremely useful. The KendoReact DateTimePicker can use any valid format string to define the format of the displayed date and time values.

    See React DateTimePicker Placeholders demo

    React DateTimePicker – Placeholders, KendoReact UI Library
  • Adaptive Rendering

    The KendoReact DateTimePicker supports an adaptive mode that provides a mobile-friendly rendering of its calendar popup. When enabled, the component will automatically adapt to the current screen size and will change its rendering accordingly.  

    See the React DateTimePicker Adaptive Rendering demo  

    DateTimePicker Adaptive mode
  • Forms Support

    The KendoReact DateTimePicker is a perfect component to be used with a form element when both a date and a time need to be selected without having two different components responsible for each portion. As a part of this, the DateTimePicker can integrate in to any form, whether it is a HTML form, a KendoReact Form or a form built by any React form library.

    See React DateTimePicker Forms Support demo

    React DateTimePicker – Forms Support, KendoReact UI Library
  • Globalization

    The KendoReact DateInput component supports globalization out of the box, which means that the format of the date placeholder and date can change depending on the locale of the user without needing to manually reconfigure the React component.

    See React DateInput Globalization demo

    React DateTimePicker – Globalization, KendoReact UI Library
  • Controlled and Uncontrolled Modes

    React components in forms come in two flavors: control and uncontrolled. Uncontrolled components enable the form data to be controlled directly by the DOM. Controlled components enable the form data to be handled by a React component. By default, the KendoReact DateTimePicker is an uncontrolled component, but can easily transition to a controlled component by working with a few configuration options.

    See React DateTimePicker Controlled and Uncontrolled Modes demo

  • Customization

    The KendoReact DateTimePicker enables you to render custom components instead of default ones, thus allowing you to customize the child component based on your needs. You can customize the DateInput, Calendar and Popup DateTimePicker components.

    See the React DateTimePicker Customization demo

  • Events

    The KendoReact DateTimePicker component supports a variery of events enabling you to customize the component behaviour based on your needs.

    See the React DateTimePicker Events demo

  • Keyboard Navigation

    The KendoReact DateTimePicker includes a few different ways to select a day and time using keyboard navigation. This includes typing in the date and time slot, incrementing the value of each value with the arrow keys, or opening the calendar and time picker in order to traverse through the displayed interface to select a date and time.

    See React DateTimePicker Keyboard Navigation demo

  • Accessibility

    Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact DateTimePicker is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

    See React DateTimePicker Accessibility demo

    Accessibility
  • Other Supported Frameworks

    The DateTimePicker component is also available for these web development frameworks:

Frequently Asked Questions

  • Why should you choose the KendoReact DateTimePicker?
    • All KendoReact components are built from the ground up for React 
    • The component is highly customizable and can be easily modified to suit your needs. 
    • It is one of over 100 other components in our React components library that developers use to build modern, consistent UI.   
    • As a commercial product, it is frequently updated for React compatibility and user demand by a full-time team of experts.    
    • Our support team consistently wins accolades from industry organizations and users themselves.  
    • Each feature is meticulously documented. 

     

     

  • Where can I find the KendoReact DateTimePicker demo?

    You can find the KendoReact DateTimePicker demo here

  • How do I get started with the KendoReact DateTimePicker?

    Getting started is easy. Visit the KendoReact Date Inputs Getting Started tutorial for an easy step-by-step tutorial. All you need to do is install the NPM package, add the component to a page, and set desired properties!  

    Don’t forget to sign up for a trial of the KendoReact components library. This gives you a 30-day license and access to support resources to help you during your learning and evaluation process. 

     

     

  • What other React Data Input components are available?

    The KendoReact components library includes a wide range of date inputs, each designed for a specific purpose:  

  • How can I try the KendoReact DateTimePicker?

    You can try all KendoReact Components by signing up for a 30-day trial. During your evaluation, you will have access to all the components, technical support, documentation and on-demand technical training.   

    See the KendoReact Date Inputs Getting Started article for a quick tutorial.  Also, don’t forget to sign up for a trial of the KendoReact components library to get free support. 

  • How can I buy the KendoReact DateTimePicker?

    The KendoReact DateTimePicker component is one of over 100 in the KendoReact components library which is part of the Kendo UI bundle. Kendo UI includes libraries for jQuery, Angular, React, and Vue. You can purchase Kendo UI online or by contacting sales.   

    You can also choose to purchase DevCraft, which bundles all our .NET and JavaScript components. 

All KendoReact Components

Next Steps