The 5 Most Useful Features of the KendoReact DateTimePicker

Intuitive, accessible and beautifully designed on the user side, our React DateTimePicker is also highly customizable and configurable on the development side.

You’ve probably heard the phrase “timing is everything” before. Well, I’m here to tell you that they’re only half right—when it comes to full-featured input components, you also need the date.

Bad jokes aside, if you’re building a UI that needs to take in date AND time information from your users, you’ve probably wrestled with the question of how to do so in the most intuitive way. Do you split it up, so they choose the date then the time, or show everything at once? How can you limit the options to only the dates and times you have available? What about validation? And what about your international users who use different date/time formats? In addition to all that, you also need to handle the question of accessibility and keyboard navigation for such a complex component.

It’s safe to say that building this component from scratch would be no walk in the park ... but lucky for you, you don’t have to! We have the answer to all those tough questions (and more) with the React DateTimePicker that’s part of the KendoReact UI component library.

The KendoReact DateTimePicker is one of seven beautiful, fully accessible input options in our Date Inputs library. It allows users to quickly and easily select both a time and a date from an available range. It has tons of excellent features to explore, but I’ve picked five that really highlight the awesome capability of this component!

Check out the companion video, Quick React DateTimePicker Overview: 5 Top Features

5. Support for Multiple Date and Time Formats

If you have a global userbase, you’ve probably already seen a wide variety of different ways that your users can format dates and times. Whether you need to support 12-hour or 24-hour time, MM/DD/YYYY or DD/MM/YY—or something entirely different—the KendoReact component library has you covered with our format property. Define one JavaScript Date object, and our formatting tools can render it differently depending on your preference. Check it out!

4. Limiting the Date and Time Range

Most of the time, we don’t want our users to be able to choose from any possible date or time. Maybe you want to rule out dates that have already passed or limit them to only work hours. By defining values for min/max or minTime/maxTime in the KendoReact DateTimePicker, you can limit your users’ selections to only what you want them to choose from.

This vastly improves the user experience, because it removes the chance of someone going through the process of choosing a date, only to immediately be told it’s wrong when they choose it or (worse) after they answer several other questions and try to submit a form. Just rule out the invalid or unavailable dates from the get-go and save everyone the frustration!

 <DateTimePicker
    minTime={new Date(2000, 1, 1, 8, 30)}
    maxTime={new Date(2000, 1, 1, 17, 30)}
  />

3. Setting a Default Value

If you already have a good idea of what your users will be inputting, you can save them a step by supplying a default value that will appear as soon as the DateTimePicker loads in your application, instead of the standard MM DD YYYY placeholders. This is especially useful if you want to collect the current date and time from your users—no need for them to go set that themselves when we can have the computer do it for them! Just set the defaultValue property to be new Date() (or whatever date you’d like to pre-populate), and let the component take care of the rest.

<DateTimePicker defaultValue={new Date()} />

2. Customization of Incremental Step Value

When you’re using keyboard controls or the scroll wheel of your mouse to quickly move through the options of a DateTimePicker, the incremental value matters a lot—by default, this value will always be set to 1, so you move through the values one at a time. But this isn’t always the most useful thing, depending on the context of your application. Being able to move through seconds in 30-second increments or jump through years a decade at a time might be more useful, depending on the scale of time they’re working with.

KendoReact allows you to customize the incremental step value of our React DateTimePicker by using the steps property. Take a look!

1. Built-in Accessibility and Keyboard Navigation

A DateTimePicker can be a difficult component from an accessibility standpoint—it’s a complex component that needs a lot of thoughtfulness and thorough testing to ensure full accessibility. Because they’re incredibly important components, it’s especially crucial to ensure they’re accessible to all your users. When you use the KendoReact library of components, you get our guarantee that each component has been designed and developed with accessibility as a top priority. The React DateTimePicker is Section 508 compliant, and has full keyboard navigation support (including a list of handy keyboard shortcuts for quick mouse-free navigation).

Intuitive, accessible, and beautifully designed on the user side, our React DateTimePicker is also highly customizable and configurable on the development side. Need a little more info? Check out all the features of this powerhouse component in the KendoReact DateTimePicker docs.

Ready to try it out? You can try out the entire KendoReact library, free for the first 30 days ... after all, there’s no time like the present!