Date and Time Selection Made Easy with React DateTime Picker
Tags: javascript, react, webdev, productivity
Published: 2019-12-11 13:08:29

---
title: Date and Time Selection Made Easy with React DateTime Picker
published: true
date: 2019-12-09 12:00:46 UTC
tags: javascript, react, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/date-time-selection-made-easy-react.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Date-and-Time-Selection-Made-Easy-with-React-DateTime-Picker-1.jpg
---

## Overview

In this blog post, we will look at the [React DateTime Picker](https://www.syncfusion.com/react-ui-components/react-datetime-picker) component in Essential JS 2. You will learn how easy it is to select a date and time with this simple DateTime Picker component and how to enable several of its notable features by extending a sample with brief code snippets. This component is typically used in an application where you need to handle operations related to dates and times, such as appointment scheduling.

This blog provides a walk-through of the React DateTime Picker component and its available features.

## Select date and time

The React DateTime Picker is a form component that allows users to enter or select date and time values from a pop-up calendar or drop-down list. The DateTime Picker presents two different icons for choosing date and time. Clicking the date icon will display the calendar pop-up, which has an option to move between year and decade views for quickly navigating to the desired date. Clicking the time icon displays the time drop-down list for selecting a time.

![Pop-up Calendar in DateTime Picker.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Pop-up-Calendar-in-DateTime-Picker.png)<figcaption>Pop-up Calendar in DateTime Picker</figcaption>

## Select date and time within a range

The DateTime Picker component can restrict the date and time values to a specific range, so the values outside the range cannot be selected. The date and time values can be restricted by entering or selecting the min and max date-time options in the React DateTime Picker. When the min and max properties are configured and the selected date-time value is out of range or invalid, the model value will be set to the out-of-range date-time value or null, respectively, with a highlighted error class indicating the date-time value is out of range or invalid.

For an example, refer to this [date and time range](https://ej2.syncfusion.com/demos/#/fabric/datetimepicker/date-time-range.html) demo.

![DateTime Picker with Restricted Selection.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/DateTime-Picker-with-Restricted-Selection.png)<figcaption>DateTime Picker with Restricted Selection</figcaption>

## Set the date and time in a specific format

The React DateTime Picker component allows changing the default culture’s date and time formats in the component’s text box to improve its readability. The component supports custom format strings with any combination of characters.

For an example, refer to this [date-and-time format](https://ej2.syncfusion.com/demos/#/fabric/datetimepicker/date-time-format.html) demo.

![Custom Date and Time Formats.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Custom-Date-and-Time-Formats.png)<figcaption>Custom Date and Time Formats</figcaption>

## Special date and time indication

The React DateTime Picker supports UI customization based on your application requirements. It can be customized using the **renderDayCell** event, which provides an option to customize each day cell to indicate a special date (like events occurring on that day).

For an example, refer to this [special date](https://ej2.syncfusion.com/demos/#/fabric/datetimepicker/special-dates.html) demo.

![Calendar with Special Dates Indicated.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Calendar-with-Special-Dates-Indicated.png)<figcaption>Calendar with Special Dates Indicated</figcaption>

## Globalization support

You can update the culture-specific date-time format, customize the first day of the week, and translate the text of the month, day, and today buttons to any supported language with the globalization features of the React DateTime Picker component.

![DateTime Picker with Custom Text.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/DateTime-Picker-with-Custom-Text.png)<figcaption>DateTime Picker with Custom Text</figcaption>

## Change first day of week

The DateTime Picker component automatically updates the first day of the week based on the specified culture. It can also be changed based on your application requirements.

Change the first day of the week using the **firstDayOfWeek** property. The day of the week ranges from 0 (Sunday) to 6 (Saturday). In the following code, we will set **Tuesday** as the first day of the week.

```xml
<DateTimePickerComponent firstDayOfWeek= {2} />
```

![Calendar with Tuesday as the First Day of the Week.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Calendar-with-Tuesday-as-the-First-Day-of-the-Week.png)<figcaption>Calendar with Tuesday as the First Day of the Week</figcaption>

## Display week number

The React DateTime Picker component allows showing the week number of the selected day in the pop-up calendar by enabling the week number option.

![Calendar with Week Numbers.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Calendar-with-Week-Numbers.png)<figcaption>Calendar with Week Numbers</figcaption>

## Islamic DateTime Picker (Hijri DateTime Picker)

The Islamic DateTime Picker, or Hijri DateTime Picker, is a **lunar calendar** consisting of 12 months in a year of 354 or 355 days. To learn more about the Islamic calendar, refer to this Wikipedia [article](https://en.wikipedia.org/wiki/Islamic_calendar).

By default, the component’s calendar is Gregorian. You can enable the Islamic mode by setting the **calendarMode** to **Islamic**. You can also import and inject the **IslamicService** module into the providers.

![Islamic Calendar in DateTime Picker.](https://www.syncfusion.com/blogs/wp-content/uploads/2019/12/Islamic-Calendar-in-DateTime-Picker.png)<figcaption>Islamic Calendar in DateTime Picker</figcaption>

## Conclusion

We hope you find this blog as a useful overview of the [React DateTime Picker](https://www.syncfusion.com/react-ui-components/react-datetime-picker) component and its important features. Check out the other features of the calendar by downloading the [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads) or cloning it from [GitHub](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/calendars). Also, feel free to have a look at our [online samples](https://ej2.syncfusion.com/react/demos/#/fabric/datetimepicker/default) and [documentation](https://ej2.syncfusion.com/react/documentation/datetimepicker/getting-started/) to explore other available options. If you wish to send us [feedback](https://www.syncfusion.com/feedback) or would like to ask any questions, please feel free to post in the comments section below, or contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/react).

The post [Date and Time Selection Made Easy with React DateTime Picker](https://www.syncfusion.com/blogs/post/date-time-selection-made-easy-react.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).