Dates: how to format them with Dayjs in JavaScript

Dates are a fundamental part of any application. In JavaScript, one of the most popular libraries for managing dates is Dayjs. In this article, we will learn how to format dates using Dayjs.

What is Dayjs?

Dayjs is a lightweight JavaScript library that allows easy and efficient management of dates and times. It's an alternative to libraries like Moment.js, but with a much smaller footprint and faster performance.

The advantage of using Dayjs is that it provides a similar API to Moment.js, so if you are familiar with Moment.js, you will find it very easy to work with Dayjs.

Installation and configuration

To start using Dayjs, we must first install it in our project. We can do this through npm by running the following command in our terminal:

npm install dayjs

After installation, we simply import the library into our JavaScript file:

import dayjs from 'dayjs';

Now we are ready to start formatting our dates.

Formatting dates with Dayjs

Dayjs provides a wide range of options to format our dates according to our needs. Some of the most common formats are:

• YYYY-MM-DD: ISO-8601 date format.
• DD/MM/YYYY– date format commonly used in many countries.
• MMMM D, YYYY- Format that displays the full name of the month and year.
• ddd, hA- Date and time format with the short name of the day of the week and the time in 12-hour format.

To format a date with Dayjs, we simply use the method format. Below is an example of how to format a date in DD/MM/YYYY format:

const date = dayjs("2022-01-01"); const formattedDate = date.format("DD/MM/YYYY"); console.log(formatteddate); // Output: 01/01/2022

As you can see in the example, we first create a Dayjs instance by passing the date as an argument, and then we use the method format to get the date formatted in the format we want.

It is also possible to chain multiple formats together. For example:

const date = dayjs(); const formattedDate = date.format("MMM D, YYYY hA"); console.log(formatteddate); // Output: Jan 10, 2023 9PM

In this case, we use the format "MMM D, YYYY hA" to get the date formatted with the short name of the month, the day of the month, the year, and the time in 12-hour format.

Conclusion

Formatting dates with Dayjs in JavaScript is a simple and efficient task. Dayjs gives us all the necessary tools to manipulate and format dates easily and quickly.

If you want to learn more about JavaScript and other technologies, be sure to visit my blog at nelkodev.com. You can also contact me through my contact form here. And if you are interested in seeing some of my projects, you can visit my portfolio at nelkodev.com/portfolio.

Frequently asked questions

What is the difference between Dayjs and Moment.js?

Dayjs is an alternative to Moment.js with a smaller footprint and faster performance. If you are looking for a lighter and faster library for date handling in JavaScript, Dayjs is a great option.

Can I use Dayjs in production applications?

Yes, Dayjs is a stable library ready to be used in production applications. It has been widely adopted by the community and has proven to be reliable and efficient in manipulating dates.

Does Dayjs support internationalization?

Yes, Dayjs provides a plugin called Day.js plugin localizedFormat that adds support for internationalization. With this plugin, you can format dates according to the local standards of each country.