Compare Dates in JavaScript

onlinecode

2 years ago

Compare Dates in JavaScript

In this post, we will give you information about Compare Dates in JavaScript. Here we will give you detail about Compare Dates in JavaScript And how to use it also give you a demo for it if it is necessary.

Suppose you have two JavaScript Date objects:

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

How do you compare if two dates are equal? Surprisingly, both triple equals and double equals don’t work when comparing two dates.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 === d3; // false
d1 == d3; // false

To compare two dates, you can use either toString() or valueOf(). The toString() method converts the date into an ISO date string, and the valueOf() method converts the date into milliseconds since the epoch.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

// 'Fri May 31 2019 20:00:00 GMT-0400 (Eastern Daylight Time)'
d1.toString();
d1.valueOf(); // 1559347200000

d1.toString() === d2.toString(); // false
d1.toString() === d3.toString(); // true

d1.valueOf() === d2.valueOf(); // false
d1.valueOf() === d3.valueOf(); // true

Before and After

Although neither == nor === can compare whether two dates are equal, surprisingly both < and > work fine for comparing dates:

d1 < d2; // false
d1 < d3; // false

d2 < d1; // true

So to check if date a is before date b, you can just check a < b.

Another neat trick: you can subtract dates in JavaScript. Subtracting a - b gives you the difference between two dates in milliseconds.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 - d3; // 0
d1 - d2; // 1 year in milliseconds, 1000 * 60 * 60 * 24 * 365

In other words, you can compare two dates a and b by using a - b.
If b is after a, then a - b < 0.

Sorting

Sorting an array of dates in JavaScript doesn’t work as you might expect. The below sort() call gives you the dates in reverse order.

const d1 = new Date('2017-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

[d2, d1, d3].sort(); // [d3, d2, d1]

Why is that? Because JavaScript’s sort function implicitly converts all values in the array into strings before sorting. So the above sort() is actually sorting based on the below string values:

[ 'Fri May 31 2019 20:00:00 GMT-0400 (Eastern Daylight Time)',
  'Thu May 31 2018 20:00:00 GMT-0400 (Eastern Daylight Time)',
  'Wed May 31 2017 20:00:00 GMT-0400 (Eastern Daylight Time)' ]

In other words, JavaScript implicitly sorts arrays of dates based on the day of the week by default.

To sort dates based on which date happened first, you need to pass a compare()callback to the sort() function. The compare() function should return:

if a and b are equal
A positive number if a > b
A negative number if a < b

Since JavaScript lets you subtract dates, you can just use a - b as
your comparison function:

const d1 = new Date('2017-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

[d2, d1, d3].sort((a, b) => a - b); // [d1, d2, d3]

JavaScript Fundamentals for Compare Dates in JavaScript

JavaScript is a programming language that is used to create interactive web pages. It is a client-side scripting language, which means that it runs on the user’s browser. JavaScript can be used to add animation, interactivity, and functionality to web pages.

Here are some of the fundamentals of JavaScript:

Variables: Variables are used to store data. They are declared using the var keyword.
Data types: JavaScript has a variety of data types, including strings, numbers, booleans, objects, and arrays.
Operators: Operators are used to perform operations on data.
Control flow statements: Control flow statements allow you to control the order in which your code is executed.
Functions: Functions are blocks of code that can be reused.
Objects: Objects are used to store data in key-value pairs.
Arrays: Arrays are used to store data in a sequential order.
Events and event handlers: Events are notifications that are sent by the browser when something happens, such as when the user clicks on an element or moves the mouse over an element. Event handlers are functions that are called in response to an event.
DOM manipulation: The Document Object Model (DOM) is a tree-like structure that represents the elements of a web page. JavaScript can be used to manipulate the DOM to change the appearance or behavior of a web page.

These are just some of the fundamentals of JavaScript. There are many other concepts that you can learn as you continue to develop your skills.

Here are some resources that you can use to learn more about JavaScript:

Mozilla Developer Network (MDN): The MDN is a great resource for learning about JavaScript. It has a comprehensive reference guide, tutorials, and articles on a wide range of topics.
W3Schools: W3Schools is another great resource for learning about JavaScript. It has interactive tutorials and quizzes that can help you learn the basics of the language.
JavaScript.info: JavaScript.info is a website that provides in-depth tutorials on JavaScript. It also has a forum where you can ask questions and get help from other JavaScript developers.