We have all been in a state of affairs in Javascript the place we’ve got a set of information, all with completely different dates, which we wish to type by date shortly. Let us take a look at how this works.
Notice on Javascript Dates: It must be famous that there isn’t a such factor as a date in Javascript. As a substitute, Javascript, natively, solely has date-time. Which means each date comes with an related time. You possibly can learn extra about Javascript Dates right here.
The way to type by date in Javascript
Step one to sorting by date is to make sure all of your dates are in date format. Suppose we’ve got an object like this:
let articles = [
{ name: "HTML Inputs", date: "03/03/2022" },
{ name: "Python Tips", date: "04/04/2022" },
{ name: "Javascript Objects", date: "05/05/2022" }
]
This would possibly not actually work for sorting dates, since our date property is in textual content format. Based mostly in your particular state of affairs, you could have to deal with this barely otherwise. For this one, I am merely going to separate every date by the ahead slash, and change the worth with a sound date worth.
let articles = [
{ name: "HTML Inputs", date: "12/03/2022" },
{ name: "Python Tips", date: "04/06/2022" },
{ name: "Javascript Objects", date: "05/05/2022" }
]
for(let article of articles) {
// Break up the date by the slash, leading to an array of [ '03', '03', '2022' ], for instance
let dateArr = article.date.break up('/');
// Yr, month, and day from the array. We subtract 1 from month, since months begin counting from 0 in Javascript dates.
let yr = parseFloat(dateArr[2]);
let month = parseFloat(dateArr[1]) - 1;
let day = parseFloat(dateArr[0])
// Move within the completely different elements as yr, month, day to get the legitimate date
let articleDate = new Date(yr, month, day);
// Replace the item
article.date = articleDate;
}
console.log(articles);
// It will output the item, now with legitimate dates!
Generally, you will not have to do that. Generally, you may have legitimate dates. You possibly can examine, as a result of in our above console.log for articles after changing the dates, they’re proven formatted as Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Imply Time)}, for instance.
Anyway, now that you’ve your dates in the usual date format, let’s type them. We’ll use type to do that:
let articles = [
{ name: "HTML Inputs", date: "03/03/2022" },
{ name: "Python Tips", date: "04/04/2022" },
{ name: "Javascript Objects", date: "05/05/2022" }
]
for(let article of articles) {
// Break up the date by the slash, leading to an array of [ '03', '03', '2022' ], for instance
let dateArr = article.date.break up('/');
// Yr, month, and day from the array. We subtract 1 from month, since months begin counting from 0 in Javascript dates.
let yr = parseFloat(dateArr[2]);
let month = parseFloat(dateArr[1]) - 1;
let day = parseFloat(dateArr[0])
// Move within the completely different elements as yr, month, day to get the legitimate date
let articleDate = new Date(yr, month, day);
// Replace the item
article.date = articleDate;
}
console.log(articles);
// It will output
VM93:20 (3) [{…}, {…}, {…}]0: {title: 'HTML Inputs', date: Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Imply Time)}1: {title: 'Python Ideas', date: Mon Apr 04 2022 00:00:00 GMT+0100 (British Summer time Time)}2: {title: 'Javascript Objects', date: Thu Might 05 2022 00:00:00 GMT+0100 (British Summer time Time)}size: 3[[Prototype]]: Array(0)
undefined
let articles = [
{ name: "HTML Inputs", date: "12/03/2022" },
{ name: "Python Tips", date: "04/06/2022" },
{ name: "Javascript Objects", date: "05/05/2022" }
]
for(let article of articles) {
// Break up the date by the slash, leading to an array of [ '03', '03', '2022' ], for instance
let dateArr = article.date.break up('/');
// Yr, month, and day from the array. We subtract 1 from month, since months begin counting from 0 in Javascript dates.
let yr = parseFloat(dateArr[2]);
let month = parseFloat(dateArr[1]) - 1;
let day = parseFloat(dateArr[0])
// Move within the completely different elements as yr, month, day to get the legitimate date
let articleDate = new Date(yr, month, day);
// Replace the item
article.date = articleDate;
}
articles.type((a, b) => a.date - b.date);
console.log(articles);
Now, an vital factor to notice right here is that type adjustments the unique array. So we needn’t create a brand new variable to retailer it. As such, articles will develop into completely sorted by date, from earliest date, to newest.
If you wish to do it the opposite manner round, write articles.type((a, b) => b.date - a.date).
Why can we type dates like numbers in Javascript?
It may appear complicated as to why this works. Certainly date is a date – so why can we subtract them from one another? Merely put, as I alluded to earlier, Javascript does not have date sorts – solely date-time sorts.
Which means each date is a date plus a time. Javascript represents this below the hood as a unix time stamp, which is a quantity representing the variety of seconds (or milliseconds, in Javascript’s case) ellapsed since January 1st, 1970. As such, we will subtract dates from one another in Javascript snce they’re truly represented as numbers.
