Blog

Manage Dates and Times with Ease in JavaScript Using Day.js

Managing dates and times in web application development has always been a challenge. However, one of the most practical and lightweight libraries that have simplified this task is Day.js. This tool has quickly become an ally for developers thanks to its simplicity and its similarity to the well-known Moment.js library. With Day.js, you can parse, validate, manipulate, and display dates/times in JavaScript at a fraction of the size of other libraries.

Table of Contents

What is Day.js?

Day.js is a minimal JavaScript library that allows us to work with dates in a very intuitive and efficient way. It is immutable, meaning that every operation you perform on a date produces a new instance of Day.js to prevent unwanted changes to the original dates. Additionally, Day.js follows the ISO 8601 format string standard, making it easier to handle dates in international environments.

Installing Day.js

To get started with Day.js, we first need to install it. You can use npm or yarn to include it in your project as follows:

npm install dayjs

yarn add dayjs

Once installed, you can start using Day.js by importing it into your JavaScript file:

const dayjs = require('dayjs');

Or, if you are using ES6 modules:

import dayjs from 'dayjs'

Working with Day.js

Get Current Date

Let's start with the basics: getting the current date and time. It's as simple as calling dayjs() no arguments.

let now = dayjs(); console.log(now.toString()); // will display the current date and time in ISO 8601 format

Formatting Dates

One of the most common needs is to display dates in a specific format. Day.js simplifies this with its method .format().

let nowFormat = now.format('YYYY-MM-DD HH:mm:ss'); console.log(nowFormat); // Example output: "2023-03-22 15:45:32"

Parsing Dates

Day.js can transform a text string into a date object using date string parsing.

let birthday = dayjs('1990-05-12'); console.log(birthday.format('DD/MM/YYYY')); // Output: "05/12/1990"

Operations with Dates

One of the great advantages of Day.js is the ability to perform operations with dates, such as adding, subtracting, or comparing.

let oneWeekLater = now.add(1, 'week'); console.log(oneWeekLater.format()); let oneWeekBefore = now.subtract(1, 'week'); console.log(oneWeekBefore.format()); console.log(now.isBefore(oneWeekLater)); // true console.log(now.isAfter(oneWeekBefore)); // true

Working with Time Zones

Day.js has a plugin to manage time zones called utc. To use it, you need to install it and then import it.

npm install dayjs-plugin-utc

const dayjs = require('dayjs'); const utc = require('dayjs/plugin/utc'); dayjs.extend(utc); let UTCTime = dayjs().utc(); console.log(timeUtc.format()); // Time in UTC format

Internationalization

If you are creating an application that will be used in different languages, Day.js offers a very convenient solution for internationalization. With the use of plugins, you can offer date formats that fit the user's locale.

Difference between Dates

To know the difference in time measurement between two dates, Day.js offers the function diff.

let start = dayjs('2023-03-01'); let end = dayjs('2023-03-22'); let difference = end.diff(start, 'days'); // The difference in days console.log(difference); // twenty-one

Consultations and Manipulation

With Day.js, you can query different aspects of a date and also manipulate them.

let month = now.month(); // January is 0, February is 1, etc. console.log(`We are in the month: ${month + 1}`); now.set('month', 5); // Change to the month of June console.log(now.toString());

Practical Use Cases and Tips

Manage Dates in Web Projects

Whether you're working on a blog, an e-commerce platform, or any other type of web project, managing dates is essential. From showing the publication date of a post to calculating delivery times, Day.js will be your tool for all this and more. To give added value to your posts, manage publication dates with friendly formats such as "An hour ago" or "Two days ago", which you can do with Day.js functions to calculate the time difference and format it accordingly. a user-readable manner.

Inclusion of Day.js in Frameworks

The use of Day.js is not restricted to pure JavaScript projects. If you are working with frameworks like React, Vue or Angular, you can integrate Day.js without problems.

Conclusion

Handling dates and times is essential in virtually any modern web application. Day.js offers an easy and efficient solution for all date-related needs, without the overhead of larger libraries like Moment.js. Its immutable nature and extensive documentation make it easy to use even for the least experienced developers.

If you want to know more about how to implement Day.js in your projects or have any questions, feel free to visit NelkoDev. There you will find a space to connect and share experiences with other developers.

Remember that managing dates doesn't have to be complicated. With tools like Day.js, you're just a few commands away from having complete control over timing in your apps. Integrate it today and make it easier to manage dates and times in your developments!

NelkoDev