Moment js date time comparison

javascript

prompt-engineering

momentjs

date-time-comparison

byAnton Shumikhin·Dec 4, 2024

Harness the power of Moment.js - it has its own comparison methods for dates: isBefore(), isSame(), and isAfter(). Take a look:

const moment = require('moment');

// Let's Play: Date Comparison Showdown!
console.log(moment('2020-01-01').isBefore('2020-01-02')); // true - 01 Jan bows to 02 Jan
console.log(moment('2020-01-01').isSame('2020-01-02'));   // false - "We are not twins!", says Jan 01
console.log(moment('2020-01-01').isAfter('2020-01-02'));  // false - 02 Jan refuses to lose!

Swiftly deduce if one date is earlier, identical, or later than another.

Counting the minutes: calculating time difference

Want to know how much time lies between two dates? Meet diff(), the Moment.js function that calculates the time difference. It's your yardstick in the lands of time, and it measures in whatever jests you want - milliseconds, minutes, months, or millennia:

const start = moment('2020-01-01');
const end = moment('2020-01-02');
const diffInDays = end.diff(start, 'days'); // Here's the magic: it outputs 1

console.log(`The difference is ${diffInDays} day(s)... or is it a leap second? 🕰️`);

Count down to events, schedule reminders, or measure elapsed time like a boss. 🕹️

The world of time zones

As developers, we often forget the earth isn't flat (shocking, right?). Don't let your users down when they are dotted all around the globe, from Timbuktu to Honolulu:

Use moment.utc() when you want to give UTC times the center stage.
moment() provides you with the luxury of local time by default.

const utcDate = moment.utc('2020-01-01T12:00:00Z');
const localDate = moment('2020-01-01T12:00:00Z').local();
console.log(`UTC time: ${utcDate.format()} - "Universal Time for the win!"`);
console.log(`Local time: ${localDate.format()} - "Home sweet home."`);

For the hardcore time travelers amongst us, get your toolkit armed with moment-timezone, the ultimate Swiss army knife for timezone acrobatics.

Treading carefully: common mistakes

Accurate comparison relies on a few pieces lining up together. Always double check:

Does the date string don a format that Moment.js recognizes?
Are you creating a moment out of a moment i.e., moment(new Date())? Lay off the obsession; it's unnecessary.

Remember, the comparison functions all have their unique divinations:

isBefore() and isAfter() are plain straight yes or no.
diff() might throw at you positives or negatives — because every story has two sides.

It's a date! Parsing and validation

Make sure your date and moment.js are a match made in heaven with Moment.js's parsing functions:

Play matchmaker with moment(date, "format").isValid() - it checks if a date string matches the expected format.

const isValidDate = moment('2020-01-35', 'YYYY-MM-DD').isValid(); // false - "Sorry, the month called. They want their days back 😁"
console.log(`The date is ${isValidDate ? 'valid' : 'invalid'}.`);

Fetch the bouquet and the banns, always marry valid dates to your application!

jQuery and Moment.js in tandem

Moment.js is a lone ranger, but you'll often see it chilling with jQuery. Here's how they hang out together:

First, crash the party by including moment.min.js and jQuery via CDN on your page.
Always make an entrance with the jQuery ready() function: it ensures the room (DOM) is ready before Moment.js starts mingling.
Use jQuery's click() function to trigger date-time comparisons for an application that interacts like a maverick.

$(document).ready(function() {
  $('#check-date').click(function() {
    const now = moment();
    const userDate = moment($('#date-input').val());
    const isFuture = now.isBefore(userDate);

    alert(`The selected date is in the ${isFuture ? 'future' : 'past'}. So, are you a time-traveller?`);
  });
});