Managing dates and times is a commonly underrated task in web application development. We face challenges from simple display of dates in different formats, to complex calculations involving time zones or seasonal time changes. This is where Day.js emerges as a formidable ally, given its lightness and ease of use, allowing us to greatly simplify time management in our projects.
What is Day.js and why is it essential in your development stack?
Day.js is an extremely lightweight JavaScript library used to parse, validate, manipulate and format dates and times in JavaScript very easily. This tool is invaluable because it allows us to deal with the complexity of dates, intuitively and without sacrificing performance.
If you're dealing with raw JavaScript to handle dates, you've probably come across JavaScript's tedious Date API and its limitations. In contrast, Day.js offers a friendlier syntax and a wide range of plugins that add additional functionality when needed. This modular approach means you only include what you need, keeping your project agile and efficient.
Installation and First Steps with Day.js
To immerse ourselves in the wonderful world of Day.js, we must first install it. The easiest way is to add it through npm or yarn, if you are working in a Node.js-based environment:
npm install dayjs # or if you use yarn yarn add dayjsOnce installed, you can start using it in your project by importing the library as follows:
const dayjs = require('dayjs'); // or using ES modules import dayjs from 'dayjs';Main Benefits and Features of using Day.js
Before we get into the specific formatting, let's list some of the key advantages and notable features of Day.js:
- Lightness: The base package size is less than 3kb minified and compressed.
- Immutable: Each operation in Day.js produces a new object, avoiding undesirable side effects.
- Internationalization: Offers a wide range of locations to display dates and times in different languages.
- Uniform API: Its API follows the same design patterns of the well-known moment.js library, making it easy to adopt if you are already familiar with it.
- Compatibility: It can be used both in the browser and in Node.js.
Formatting Dates with Day.js
Date formatting is one of the great strengths of Day.js. Here I will show you how to do it step by step:
Common Date Formats
Let's start with something simple. How would you display the current date in different formats? Very easy:
let now = dayjs(); console.log(now.format('YYYY-MM-DD')); // Example output: 2023-04-01 console.log(now.format('DD/MM/YYYY')); // Output example: 04/01/2023 console.log(now.format('dddd, MMMM D')); // Example output: Saturday, April 1Custom Formats
We are not limited to predefined formats; we can create our own!
console.log(now.format('YYYY [the year of] MMMM')); // 2023 the year of AprilUsing square brackets, we can insert text that will not be processed as part of the date format.
Relative Dates
Day.js can also tell us the relationship of a date to the current moment:
let oneWeekBehind = now.subtract(1, 'week'); console.log(oneweekago.fromNow()); // 7 days agoDate Manipulation
Do you need to modify dates or times? Let's see how:
let birthday = dayjs('2023-05-30'); birthday = birthday.add(1, 'year'); console.log(birthday.format('YYYY-MM-DD')); // 2024-05-30Date Comparison
Day.js makes it easy to compare between different dates:
let date1 = dayjs('2023-04-01'); let date2 = dayjs('2024-04-01'); console.log(date1.isBefore(date2)); // true console.log(date1.isSame(date2)); // falseWorking with Time Zones and Location
A critical aspect in date management is the management of time zones. Day.js has a specific plugin for this:
const utc = require('dayjs/plugin/utc'); const timezone = require('dayjs/plugin/timezone'); dayjs.extend(utc); dayjs.extend(timezone); let dateTimeZone = dayjs().tz("America/New_York"); console.log(timeZonedate.format()); // shows the date and time in New YorkTo localize dates in the language you prefer, use the localization plugin and set your desired location:
require('dayjs/locale/es'); dayjs.locale('en'); // use Spanish let nowInSpanish = dayjs(); console.log(nowInSpanish.format('dddd, MMMM D')); // Saturday, April 1Day.js in Modern Development Environments
With the modernization of web development and the popularity of frameworks like React, Angular or Vue, Day.js serves as an ideal date abstraction layer. Its immutable nature and familiar API make it perfectly suited to be integrated into reactive components or application services.
Conclusion and Additional Resources
Managing dates doesn't have to be complicated. With Day.js, you can radically simplify the way you work with dates and times in your web projects. Whether you're formatting dates, calculating time differences, or managing time zones, this library will be your reliable companion.
I invite you to explore more about Day.js in the official documentation and see how you can integrate it into your projects. If you have any questions or need personalized advice, do not hesitate to contact me through https://nelkodev.com/contacto. And for more development and programming content, be sure to visit https://nelkodev.com.
With Day.js, manage your time wisely and focus on what really matters: creating amazing apps.
See you next code!
English 
Spanish