Date and Time Formatting with the Intl Library

JavaScript
5 minutes read

Introduction

Every application we use, from social media platforms to productivity apps, incorporates date and time formatting in some way. Having the ability to accurately handle and format dates and times can mean the difference between a top-tier app and an average one.

Today, we’ll dive into an invaluable tool that makes this task less daunting: the Intl library. This library, short for internationalization, plays a significant role in catering to different geographical regions and cultures. Its robust date and time formatting capabilities make it a favorite among developers.

Understanding Date and Time Components

To format date and time efficiently, you need to understand its components. These are year (y), month (M), day (d), hour (h or H), minute (m), second (s), day of the week (E), and timezone (z).

Each component has associated format codes that dictate its representation in the output. For instance, in the Intl library, MMMM represents the full name of the month, while MM represents it in two-digit format.

Here are some examples that demonstrate the representation of these components:

1- Formatting the year in four-digit format

var date = DateTime(2023, 06, 15);
var formatter = DateFormat('yyyy');
print(formatter.format(date)); // Outputs: 2023

Here, we use yyyy to represent the year in a four-digit format. For example, we formatted the year 2023 as as “2023”.

2- Formatting the month in full name format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('MMMM');
print(formatter.format(date)); // Outputs: June

we use MMMM to represent the month in full name format. In this example, we format the sixth month of the year as “June”

3- Formatting the day in two-digit format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('dd');
print(formatter.format(date)); // Outputs: 15

dd formats the day in a two-digit format. Here, we formatted the day 15 as “15”.

4- Formatting the hour in 24-hour format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('HH');
print(formatter.format(date)); // Outputs: 13

The hour is formatted in a 24-hour format using HH. For instance, we formatted 13:30 as “13”.

5- Formatting the timezone

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('z');
print(formatter.format(date.toUtc())); // Outputs: UTC

We use the z to represent the time zone. Here, we convert the date to UTC and format it, and the output is “UTC”.

Exploring Format Codes and Patterns

Format codes can be combined to create format patterns. These patterns define the output format. Let’s illustrate this with examples.

1- Combine year, month, and day in shorthand pattern

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.yMd('en_US');
print(formatter.format(date)); // Outputs: 6/15/2023

We combine year, month, and day in a shorthand pattern using .yMd(). This results in the date being formatted as “6/15/2023”.

2- Combine year, month (in full name), and day in long pattern

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('yMMMMd', 'en_US');
print(formatter.format(date)); // Outputs: June 15, 2023

By using yMMMMd, we format the year, month (in full name), and day in a long pattern. The output is “June 15, 2023”.

3- Combine the day of the week, month, and day

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.EEEE('en_US').add_MMMd();
print(formatter.format(date)); // Outputs: Thursday, Jun 15

EEEE is used to format the day of the week, and we add the month and day using .add_MMMd(). The output is “Thursday, Jun 15”.

4- Combine hour, minute, and second

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('Hms', 'en_US');
print(formatter.format(date)); // Outputs: 13:30:00

Hms is used to format the hour, minute, and second. Here, the time is formatted as “13:30:00”.

5- Combine year, month, day, hour, minute, second, and timezone

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('yMMMdHmsz', 'en_US');
print(formatter.format(date.toUtc())); // Outputs: Jun 15, 2023 13:30:00 UTC

We combine year, month, day, hour, minute, second, and timezone using yMMMdHmsz. The output is “Jun 15, 2023 13:30:00 UTC”.

Handling Localization and Locale-specific Formatting

Localization is paramount in internationalized applications. The Intl library facilitates locale-specific formatting, allowing you to specify locale preferences. Let’s see this in action:

1- Format date in US locale

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.yMMMMd('en_US');
print(formatter.format(date)); // Outputs: June 15, 2023

By specifying en_US as the locale, we format the date as per US convention, resulting in “June 15, 2023”.

2- Format date in French locale

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.yMMMMd('fr_FR');
print(formatter.format(date)); // Outputs: 15 juin 2023

Similarly, by specifying fr_FR as the locale, the date is formatted in French as “15 juin 2023”.

3- Format time in 12-hour format with AM/PM in US locale

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.jms('en_US');
print(formatter.format(date)); // Outputs: 1:30:00 PM

jms is used to format time in a 12-hour format with AM/PM as per US locale. The output is “1:30:00 PM”.

4- Format the day of the week, month, and day in the Italian locale

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.EEEE('it_IT').add_MMMd();
print(formatter.format(date)); // Outputs: giovedì, giu 15

By specifying it_IT as the locale and using EEEE with .add_MMMd(), we get the day of the week, month, and day in Italian: “giovedì, giu 15”.

5- Format the full date and time in the German locale

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.yMMMd('de_DE').add_Hms();
print(formatter.format(date)); // Outputs: 15. Juni 2023 13:30:00

By specifying de_DE as the locale and combining year, month, day, hour, minute, and second, we format the date and time in German: “15. Juni 2023 13:30:00”.

Advanced Formatting Options

The Intl library also provides advanced formatting options like timezone handling, 12-hour vs. 24-hour format, relative time formatting, and custom formatting. Let’s look at some advanced formatting options that the ‘intl’ library offers:

1- Formatting the date in an abbreviated month and day format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat.MMMd('en_US');
print(formatter.format(date)); // Outputs: Jun 15

MMMd is used to format the date in an abbreviated month and day format, resulting in “Jun 15”.

2- Formatting the date in year and week of the year format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('yW', 'en_US');
print(formatter.format(date)); // Outputs: 2023 24

yW formats the date in the year and week of the year format. The output is “2023 24”, where 24 is the week number.

3- Formatting the time in a 12-hour format without AM/PM

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('h:m', 'en_US');
print(formatter.format(date)); // Outputs: 1:30

h:m is used to format the time in a 12-hour format without AM/PM. Here, the time “13:30” is formatted as “1:30”.

4- Formatting the date and time in a year, month, day, hour, and minute format

var date = DateTime(2023, 06, 15, 13, 30);
var formatter = DateFormat('yMdjm', 'en_US');
print(formatter.format(date)); // Outputs: 6/15/2023 1:30 PM

yMdjm is used to format the date and time in a year, month, day, hour, and minute format. The output is “6/15/2023 1:30 PM”.

Best Practices for Date and Time Formatting

When formatting dates and times, it’s crucial to handle edge cases like leap years and timezone conversions. Ensure compatibility across different platforms and locales, and always verify the output of your formatted dates and times. Let’s see some examples

1- Handle leap year

var date = DateTime(2024, 02, 29);
var formatter = DateFormat.yMMMMd('en_US');
print(formatter.format(date)); // Outputs: February 29, 2024

To handle leap years, we make sure to correctly format a date like February 29, 2024.

2- Handle different timezones

var date = DateTime(2024, 02, 29);
var formatter = DateFormat('yMMMdHmsz', 'en_US');
print(formatter.format(date.toUtc())); // Outputs: Feb 28, 2024 23:30:00 UTC

To handle different timezones, we convert the date to UTC and format it, resulting in “Feb 28, 2024 23:30:00 UTC”.

3- Format the date in the locale of the current platform

var formatter = DateFormat.yMMMMd(Intl.systemLocale);
print(formatter.format(date)); // Outputs: date in the current system's locale

To format the date in the locale of the current platform, we use Intl.systemLocale.

4- Handle locale-specific 12-hour and 24-hour format

var formatter = DateFormat.Hm('en_US'); // 24-hour format
print(formatter.format(date)); // Outputs: 23:30

formatter = DateFormat.jm('en_US'); // 12-hour format
print(formatter.format(date)); // Outputs: 11:30 PM

To handle locale-specific 12-hour and 24-hour formats, we use Hm for 24-hour format and jm for the 12-hour format. The outputs are “23:30” and “11:30 PM” respectively.

Further Reading

Conclusion

Mastering date and time formatting is crucial in software development, and the Intl library is an indispensable tool for this task. From basic format codes and patterns to advanced formatting options, Intl offers you an array of powerful tools to help you deliver robust, user-friendly applications. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *