Today we will break down common date and time formats and share some handy tips for using KendoReact DatePicker.
Did you know that some countries have different date formats than others? I was a bit surprised too when I first got to know about it. For instance, in the US, the commonly used date format is MM/DD/YYYY, but a lot of countries in Europe, such as the United Kingdom, use the DD/MM/YYYY format. Some Arabic countries use DD/YYYY/M, while China uses YYYY/MM/DD.
Providing correct date and time formatting can get quite tricky if your application serves users in many different countries. To provide a better user experience, it’s a good idea to display dates in a format that users are most accustomed to.
Let’s have a look at how we can implement the aforementioned formats in a React DatePicker. To illustrate how we can deal with different date formats, we will use KendoReact DatePicker. Besides that, we will use the KendoReact DateTimePicker to illustrate how to format times.
If you’re interested in other possible date formats, check out this page.
The full code example is available in this GitHub repository. Below is an interactive example of what we are going to implement:
To set up a new React project, you can run the npx create-react-app my-react-datepicker
command in your terminal.
After the project is created, install these dependencies:
Next, replace the contents of App.js
and App.css
files, as we need to clean up the default code and import the theme we installed.
src/App.js
src/App.css
That’s it for the project setup. Let’s add a React DatePicker with a few different date formats.
Note: KendoReact is a commercial UI component library, and as a part of this you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license. For more information, you can head over to the KendoReact Licensing page.
A great thing about the KendoReact DatePicker component is that it provides out-of-the-box support for formatting dates. We can easily specify the date format we want by providing the format
prop to the DatePicker
component. The code below shows four date pickers showing US, UK, Arabic and Chinese date formats.
src/components/DatePickers.js
Now update the App.js
file to render the DatePickers
component.
src/App.js
Getting the KendoReact DatePicker component to work with custom date formats was a breeze. What’s more, the DatePicker component has great accessibility, so it can be fully controlled just by using a keyboard.
If you would like to explore KendoReact’s date formats, you can find the documentation here.
Now, what if we wanted a bit different format? Let’s say we wanted to display a full month name instead of just numbers. We can do that by providing an object to the format
prop. Create a new component called LongMonthFormatPicker
.
src/components/LongMonthFormatPicker.js
And update the App.js
file to include our newly created component.
src/App.js
You can see the result in the gif below. The date displayed starts with the full month name and then is followed by the day and year, for instance, August 20, 2021
.
We have covered how to use different date formats when selecting a specific day, month and a year. But what if we don’t want to select a day, but only a month and year and display them in a format like 11/2021
or August 21
? We can do that as well.
By default, the DatePicker
calendar requires users to select a day, month and year. However, we can provide a custom calendar component. We wrap the KendoReact Calendar and pass year
as bottomView
and topView
props.
src/components/MonthPickers.js
src/App.js
If your application serves users in many different countries, then you probably need to get the user’s default locale and allow a user to specify their own locale. The KendoReact DatePicker component has first-class support for globalization. Let’s implement a DatePicker
that will change its format and calendar language based on the currently selected locale. The four locales mentioned at the start of this article will be used.
First, we need a SelectLocale
component that will do three things:
locales
children
src/components/SelectLocale.js
We need to provide the locale
to the children, as we need to pass it to the KendoReact IntlProvider
component. In the App.js
file, we need to add a few imports. First, we will import the SelectLocale
component we just created and DynamicLocaleDatePicker
we will create in a moment. However, we also need to import data with calendar information for different locales. This data is coming from cldr-core
and cldr-dates-full
packages we installed at the start.
src/App.js
Last but not least, we need to create the DynamicLocaleDatePicker
component.
src/components/DynamicLocaleDatePicker.js
The DatePicker format and calendar language will now update according to the selected locale, as shown in the gif below.
So far we have covered a few different ways to format the date. Now let’s have a look at formatting time. KendoReact offers a React DateTimePicker component which is an enriched version of the DatePicker
. Besides selecting a date, it also allows users to select the time.
We will take advantage of the locale selection we implemented previously for the DatePicker
component, but also provide our own custom formats. Now, create a new component called DateTimePickerWithLocale
.
src/components/DateTimePickerWithLocale.js
Finally, import and render the Kendo DateTimePicker component in the App.js
file.
src/App.js
You can see the final result in the gif below.
That’s it. As you now know, date and time formats may vary across different countries. It can be quite tricky to create a React DatePicker that supports date and time formatting with locales. Fortunately, we can use KendoReact, which provides many feature-rich and accessible components that can be easily configured and customized.
Thomas Findlay is a 5-star rated mentor, full-stack developer, consultant, technical writer and the author of “React - The Road To Enterprise” and “Vue - The Road To Enterprise.” He works with many different technologies such as JavaScript, Vue, React, React Native, Node.js, Python, PHP and more. Thomas has worked with developers and teams from beginner to advanced and helped them build and scale their applications and products. Check out his Codementor page, and you can also find him on Twitter.