Mastering Date and Time with Moment.js: A Comprehensive Guide

Moment.js is a lightweight JavaScript library for parsing, validating, manipulating, and displaying dates and times. It is designed to work both in the browser and in Node.js. Moment.js is widely used by developers because it provides a simple and intuitive API for working with dates and times.

Why is Moment.js so popular?

Here are some of the reasons why Moment.js is so popular:

• Comprehensive API: Moment.js provides a comprehensive API for working with dates and times. It includes functions for parsing, validating, formatting, manipulating, and calculating dates and times.

• Easy to use: The Moment.js API is easy to use and understand. It is designed to be developer-friendly and to make it easy to work with dates and times in JavaScript.

• Well-documented: Moment.js is well-documented, with a comprehensive documentation website that includes tutorials, examples, and a reference guide.

• Widely used: Moment.js is widely used by developers all over the world. It is supported by a large and active community, which means that there are many resources available to help developers learn and use Moment.js.

Section 1: Getting Started with Moment.js

Subsection 1.1: Installation Explain how to install Moment.js using npm:

npm install moment

Subsection 1.2: Importing Moment.js Show how to import Moment.js in your project:

import moment from 'moment';

---

Section 2: Basic Usage of Moment.js

Subsection 2.1: Creating a Date Object Provide examples of creating date objects using Moment.js:

const currentDate = moment();
const customDate = moment('2023-11-01');

Subsection 2.2: Formatting Dates Demonstrate how to format dates with Moment.js:

const formattedDate = currentDate.format('MMMM Do YYYY, h:mm:ss a');

---

Section 3: Manipulating Dates with Moment.js

Subsection 3.1: Adding and Subtracting Time Show how to perform operations like adding days or subtracting hours:

const futureDate = currentDate.add(7, 'days');
const pastDate = currentDate.subtract(2, 'hours');

Subsection 3.2: Difference Between Dates Explain how to calculate the difference between two dates:

const date1 = moment('2023-11-01');
const date2 = moment('2023-11-10');
const daysDifference = date2.diff(date1, 'days');

---

Section 4: Handling Timezones with Moment.js

Subsection 4.1: Setting and Converting Timezones Demonstrate how to set and convert timezones:

const utcDate = moment.utc('2023-11-01T12:00:00');
const localDate = utcDate.local();

---

Section 5: Advanced Features of Moment.js

Subsection 5.1: Parsing Dates Show how to parse dates from strings with custom formats:

const parsedDate = moment('2023-11-01', 'YYYY-MM-DD');

Subsection 5.2: Working with Durations Introduce the concept of durations and how to use them:

const duration = moment.duration(2, 'hours');
const futureTime = currentDate.add(duration);

Most useful methods from Moment.js

1. format date

moment().format('DD/MMM/YY'); // 04/Jul/20
moment().format('DD/MM/YY'); // 04/07/20
moment().format('MM-DD-YYYY'); // 07-04-2020
moment().format('YYYY-MM-DD'); // 2020-07-04
moment().format('M'); // 7
moment().format('DDD'); // 186

2. Subtract time from date

moment().subtract(1, 'days').format('MM/DD/YYYY'); // 07/03/2020
moment().subtract(1, 'months').format('MM/DD/YYYY'); // 06/04/2020

3. Add time to date

moment().add(3, 'years').format('YYYY'); // 2023
moment().add(48, 'hours').format('MM/DD/YYYY'); // 07/06/2020

4. Check if date is after some other date

moment('2020-07-01').isAfter('2019-06-01'); // true

5. Check if date is before some other date

moment('2020-07-01').isBefore('2019-06-01'); // false

6. Check if dates are equal

moment('2015-09-10').isSame('2015-09-10'); // true
moment('2018-03-10').isSame('2018-03-11'); // false

7. Display number of days in month

moment('2020-07').daysInMonth(); // 31
moment('2020-06').daysInMonth(); // 30

8. Start of a month

moment().startOf('month').format('MMM-dddd, HH:mm'); // Jul-Wednesday, 00:00

9. End of a month

moment().endOf('month').format('MMM-ddd, HH:mm a'); // "Jul-Fri, 23:59 pm"

10. Current day number

moment('2020-07-10').day(); // 5

11. Days difference

moment('2020-07-10').diff('2020-07-05', 'days'); // 5

12. 12h time format

moment().hours(14).minutes(23).format('hh:mm a'); // 02:23 pm

13. 24h time format

moment().hours(8).minutes(11).format('HH:mm'); // 08:11