Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (38)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (383)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (86)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (56)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (85)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Date and Time Selection Made Easy with React DateTime Picker.

Date and Time Selection Made Easy with React DateTime Picker

Overview

In this blog post, we will look at the 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.
Pop-up Calendar in DateTime Picker

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 demo.

DateTime Picker with Restricted Selection.
DateTime Picker with Restricted Selection

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 demo.

Custom Date and Time Formats.
Custom Date and Time Formats

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 demo.

Calendar with Special Dates Indicated.
Calendar with Special Dates Indicated

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.
DateTime Picker with Custom Text

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.

<DateTimePickerComponent firstDayOfWeek= {2} />
Calendar with Tuesday as the First Day of the Week.
Calendar with Tuesday as the First Day of the Week

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.
Calendar with Week Numbers

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.

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.
Islamic Calendar in DateTime Picker

Conclusion

We hope you find this blog as a useful overview of the React DateTime Picker component and its important features. Check out the other features of the calendar by downloading the free 30-day trial or cloning it from GitHub. Also, feel free to have a look at our online samples and documentation to explore other available options. If you wish to send us 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, Direct-Trac, or feedback portal.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top