{"id":8390,"date":"2021-01-16T12:56:00","date_gmt":"2021-01-16T18:56:00","guid":{"rendered":"https:\/\/upmostly.com\/?p=8390"},"modified":"2022-11-01T09:44:54","modified_gmt":"2022-11-01T14:44:54","slug":"comparing-dates-in-javascript-without-the-time-component","status":"publish","type":"post","link":"http:\/\/upmostly.com\/angular\/comparing-dates-in-javascript-without-the-time-component","title":{"rendered":"Comparing Dates In Javascript Without The Time Component"},"content":{"rendered":"\n<p>I came across an interesting problem recently where I had to check if a date was before or after today. Getting todays date seemed trivial :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">let today = new Date();<\/code><\/pre>\n\n\n\n<p>But in my test cases, things were blowing up, often at weird times of the day. And it occurred to me that I wasn\u2019t just comparing dates, I was comparing the times on those date objects too!<\/p>\n\n\n\n<p>Such is Javascript, there isn\u2019t actually a way to ask a date object for *only* the date portion for comparisons sake, it always has a time component attached. So for example if I have something like so :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">let someDate = someService.getTheDate();\/\/ Returns Sat Jan 16 2021 08:30:00\nlet today = new Date();\/\/ Returns Sat Jan 16 2021 9:30:00\nlet isSameDay = today == someDate; \/\/ False!<\/code><\/pre>\n\n\n\n<p>It\u2019s comparing the time as well as the date!<\/p>\n\n\n\n<p>A very very common pitfall is assuming that the method .getDate() on a Date object will return the date.. Well.. It does, but only the day of the month. So in our example, it will return 16 as in the 16th of Jan. But obviously if you are comparing dates across different months, this isn\u2019t going to work!<\/p>\n\n\n\n<p>So how can we compare just the dates? There is some.. shall we say\u2026 interesting fixes out there. One that seems the most prominent is to zero out the time portion :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">let today = new Date();\/\/ Returns Sat Jan 16 2021 9:30:00\ntoday.setHours(0, 0, 0, 0); \/\/ Today is now Sat Jan 16 2021 0:00:00<\/code><\/pre>\n\n\n\n<p>But the issue with this method is that your date object now has a zero\u2019d out time so if you want to use it elsewhere, you should first clone the date object, then zero it out, then compare it. Something like so :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">let today = new Date();\/\/ Returns Sat Jan 16 2021 9:30:00\nlet clonedDate = new Date(today);\nclonedDate.setHours(0, 0, 0, 0); \/\/ Today is now Sat Jan 16 2021 0:00:00\nconsole.log(today);\/\/ Still returns Sat Jan 16 2021 9:30:00<\/code><\/pre>\n\n\n\n<p>However, this setHours method didn\u2019t sit well with me. It was somewhat ambiguous what it was doing, even with the cloning. So my prefered approach was actually to create a new date object using only the parts I cared about.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">let today = new Date();\/\/ Returns Sat Jan 16 2021 9:30:00\nlet clonedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());<\/code><\/pre>\n\n\n\n<p>Then I can compare clonedDate to another date that we create using only the date portion, and the comparison works perfect!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I came across an interesting problem recently where I had to check if a date was before or after today. Getting todays date seemed trivial : But in my test cases, things were blowing up, often at weird times of the day. And it occurred to me that I wasn\u2019t just comparing dates, I was [&hellip;]<\/p>\n","protected":false},"author":131,"featured_media":8393,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-8390","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/131"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=8390"}],"version-history":[{"count":3,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8390\/revisions"}],"predecessor-version":[{"id":13395,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8390\/revisions\/13395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/8393"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=8390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=8390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=8390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}