Handling Dates with JavaScript Calendars Package

8 min read Nov 21, 2024

This blog is intended to give you a clear understanding of the best way to utilize the Essential JS 2 calendars package to choose the best-suited UI components to handle date-time values in your modern web apps.

From the package name itself, you knew that the package was going to have a calendar component. Yes, of course you’re right, but this package not only holds the calendar, it has a huge set of UI components (date picker, time picker, date-time picker, and date-range picker) to handle the date values as a single selection or range of selections in web applications.

The core intention of the calendars package is to cover all the possibilities of date-time value handling in the web with the most flexible and best-suited UI tools. They should help user interaction be smoother in applications and reduce the job of developers handling date-value codes in the development process.

As I mentioned earlier, the calendars package includes the following set of components:

What has been considered in developing these components?

UX design of components in calendars package

What will initially cause more users to choose one application over another? Most of them will go with the simplest and best UX design of the application. So, the best-designed application requires the best-designed subset of UI tools.

Here the components in the calendars package are made with a simple and excellent UX design that fits into our multiple-device world.

You can see in the following screen shot a component’s UX design covering all the required use cases for selecting a date and time as quickly as possible.

Header text specifies the name of the current month that is displayed in the calendar table.
Up and down arrows to navigate the previous and next months in calendar.
Header of the days of the week.
Week number of the year.
Dates in calendar table.
Today button in footer to quickly pick today’s date.

The header text of the calendar is clickable to drill down from month to year as well as year to decade and vice versa. It gives a nice experience to end users for selecting far off dates in an easy, fast way. Let’s see the UX of a drilled-down calendar in month view.

The drill-down or up options not only give users an easy way to select a date, they also allow you to change the calendar so that only the month or year can be selected as values. So, you can use the calendar to act as a month or year picker.

This is a cool way you can make use of a single component as a date, month, or year picker based on your application choice. Following, you can see the year view of calendar.

As we have seen the calendar design, now let’s see the date picker UX design that covers both desktop and mobile devices.

Text box in which to enter a date value.
Cross icon allows clearing of the value in the text box.
Drop-down calendar icon to pop up the calendar and pick a date.
Header that displays the name of the month, year, or decade shown in the calendar table.
Up and down arrows to navigate the previous and next months in the calendar.
Header with days of the week.
Selected date.
Week number of the year.
All the dates in the calendar table.
Today button in footer to pick today’s date in the calendar.

You may think there’s no major difference between calendar and date picker, but there’s a difference. Date picker is an editable input form component and only takes HTML input for rendering, whereas calendar can be used in form or anywhere as inline and takes all elements for rendering.

In mobile devices, the date picker is more adaptive, as seen in the following screenshot, and gives a better user experience.

Here the calendar pop-up is placed at the center of the device for easy interaction.Well, now let’s see the simple time picker component that pops out of the time list to select the time value.

Text box in which to enter the time value.
Cross icon allows clearing of the value in the text box.
Drop-down time icon to pop up the time list and pick the time.
Default scroller to scroll and pick the time easily.
Selected time value highlighted in list.

In mobile devices, the pop-up comes over the text box so that you can easily pick the time value from pop-up time list.

Next is the date-time picker. The UX design of the date-time picker component is a combination of both the date picker and time picker. So only the text box holds the two icons, date and time, to pop out the calendar and select a date and time list from which to select the time.

Finally, we are going to see the UX of date-range picker. This component is for selecting two dates as the start and end of a range. It presents nice user interaction on the desktop by showing two consecutive months in parallel, as shown in the following image.

Text box in which to enter the start and end date values.
Drop-down range calendar icon to pop up the date-range calendar.
Represents the selected start and end month.
Represents the number of days in the selected date range.
Previous and next month navigation pointer.
Header text representing the name of the current month shown.
Selected start date in left-side calendar.
Selected end date in right-side calendar.
Apply button to update the selected date-range value.
Cancel button to cancel the selection of a date range.

But if the same UX design is used for mobile, then it’s definitely not going to have the best user interaction for choosing start and end dates. Well, it won’t happen: the UX design of the component switches automatically with the devices or minimal resolution to bring the best user-friendly UI, as shown in the following.

Toggle button to change the start date and end date selection.
Represents the number of days in the selected date range.
Header text with the name of the month being shown.
Selected start date.
Selected end date.
Today’s date is highlighted.
Apply button to update the selected date-range value.
Cancel button to cancel the selection of a date range.

That design brings the Date-range picker as more adaptive and can show a single calendar for start and end date selection. Another preferred use case in this component is a predefined set of ranges from which to make a quick selection. Here, the presets are presented as a drop-down list that works in all devices as shown in the following.

From the UX design, it’s clear that these components are more user friendly in all devices because they cover all required use cases.

Functionalities covered in components

Not only do these components provide better user experience through UX design, they also cover all functionalities in the basis of the 80:20 rule with flexible options that will fulfill all business needs in modern applications. Here are these features:

Month or year selection—In calendar and date picker, these provide flexible options to select only the month or year as a date value.

Date range—Restricts the range of dates that can be selected.

Globalization—Supports globalization (internationalization and localization) to translate the names of months, days, and the today button text to any supported language.

First day of week—Change the first day of weeks in every month.

Disabled dates—Any date can be disabled to prevent selection.

Customization—You have complete control over the appearance of the date components.

Highlight weekends—Highlight every weekend in a month.

Week number—Show the week number of selected dates by enabling the week number options.

Formatting—Input values can be set to be custom formatted apart from the default culture-specific date format.

Validation—Allows only valid values to be entered in input by validating that values are not invalid, disabled, or out-of-min or out-of-max of the date range. The disabled and out-of-date-range values are set to be in a disabled state that prevents the end user from selecting them.

Predefined ranges—In date-range picker, define a preset of ranges to allow end users to select a frequently used date range.

When to use which component

Calendar acts as an inline component and is best suited when you want to visualize data on specific date.

Date Picker is a form component used to get or set a date value, so it’s best suited when only using a date as a value.

Time Picker is a form component used to get or set a time value, so it’s best suited when only using a time as a value.

Date-Time Picker is a form component used to get or set a date-time value, so it’s best suited when using a date as well as a time value.

Date-Range Picker is a form component used to get or set start and end date values, so it’s best suited when using a range of dates.

Summary

I hope now you understand the Syncfusion JavaScript calendars package and its available components, including their usage and when they best suit your applications. Stay tuned for other blogs about our Essential JS 2 components and their features.

Try our date-time components by downloading from the free trial or GitHub. Feel free to have a look at our online samples and documentation to explore other available options. If you have any questions or require clarification, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are always happy to assist you!

If you like this blog post, we think you’ll also like the following free e-books:

Tags:

Meet the Author

Sumankumar G

SumanKumar is a Technical Product Manager at Syncfusion for Web products. He is passionate about Web technology and has been active in development since 2010.