One thing we can do when solving coding problems is use the Date Object to compare dates and times to conditionally render certain logic in our code. This article takes a look at how to use the Date Object to compare two dates to see which one is the later (or earlier) date.
<\/p>\n\n\n\n
JavaScript has a built-in Date Object we can use to access methods able to assist us in doing logic based on timestamps. To set this up, instantiate a new Date by coding the following:
<\/p>\n\n\n\n
const date = new Date("09-20-2020"); \/\/2020-09-20T07:00:00.000Z<\/pre><\/div>\n\n\n\nIf you were to input console.log(date)<\/code>, the time (the substring after the T) will differ based upon where you live by default. If you would like to work with UTC time, remove the Z and add +HH:MM<\/code> or -HH:MM<\/code> instead.
<\/p>\n\n\n\nKnowing how to set this up is important when we work with our compare function in the next section.
<\/p>\n\n\n\n
Next, take a look at the methods offered to us when using the Date constructor. One such method is getTime()<\/code>. We use this method to change our Date Object to a number so it can be easily compared.\u00a0
<\/p>\n\n\n\nThis particular method converts the date to the number of milliseconds since the epoch began (the epoch began on January 1, 1970). Here\u2019s our getTime method:
<\/p>\n\n\n\n
const date = new Date("09-20-2020")\n date.getTime(); \/\/1600585200000<\/pre><\/div>\n\n\n\nBecause the date is instantiated as a new Date Object, we can use dot notation to access the getTime function.
<\/p>\n\n\n\n
I recommend checking out the documentation for all the different types of methods you can use on the Date Object for your logic. We\u2019re ready now to tackle our prompt.<\/p>\n\n\n\n
The Prompt<\/h2>\n\n\n\n
Given two strings and a comparison operator, return a date that is either the least or the greatest dependent on the operator given. It is guaranteed that the two passed strings can be transformed to a Date Object. <\/p>\n\n\n\n
The Steps To Solve<\/h3>\n\n\n\n- Change the two strings to new Date Objects. Don\u2019t forget to investigate how to pass parameters into your Date constructor!<\/li>
- Use the
getTime()<\/code> method to create a number of milliseconds that have passed since Jan 1, 1970.\u00a0<\/li>- Use a conditional statement or ternary to figure out the date needed as indicated by the passed comparison operator.<\/li>
- Convert the milliseconds into a readable date string and return it.\u00a0<\/li><\/ol>\n\n\n\n
Try to solve it on your own before referring to the solution!
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width">\n <style>\n body {\n font-family: 'Roboto', Courier, monospace\n }\n <\/style>\n<\/head>\n<body>\n <h1>Date Comparison<\/h1>\n <label for="comparison">Comparison (Choose One)<\/label>\n <div id="comparison" value="more.value">\n <input name="compare" type="radio" id="less" value=""\/>\n <label for="less"> < <\/label>\n <input name="compare" type="radio" id="more" checked value=""\/>\n <label for="more"> >= <\/label>\n <\/div>\n <br\/>\n <label for="date-1">Date 1:<\/label>\n <input id="date-1" value="" type="date" name="date1" \/>\n <label for="date-2">Date 2:<\/label>\n <input id="date-2" value="" type="date" name="date2" \/>\n <input id="submit-button" type="submit" \/>\n <div id="demo"><\/div>\n <script>\n const handleSubmit = (date1, date2, compare) => {\n \/\/to compare : getTime of each date\n date1Arr = date1.split("-");\n date2Arr = date2.split("-");\n \/\/year, month (month is zero-based), day\n let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();\n let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();\n \/\/ getTime gets the number of milliseconds since Jan 1 1970. So the higher the number, the later the date.\n \/\/use conditional or ternary to return Comparison\n let timeDisplay;\n if(compare === ">=") {\n timeDisplay = d1 >= d2 ? d1 : d2;\n } else {\n timeDisplay = d1 < d2 ? d1 : d2;\n }\n let timetoDisplay = new Date(timeDisplay); \n document.getElementById("demo").innerHTML = timetoDisplay.toDateString();\n }\n let date_1 = document.getElementById("date-1");\n let date_2 = document.getElementById("date-2");\n document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))\n <\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\nDates in JavaScript can be confusing at first, but with a little practice, you\u2019ll get it in no time. Here, we\u2019ve looked at how to set up a new date in JavaScript and access a method on its constructor. We\u2019ve also looked at how to compare two dates to see which was the greatest or least depending on the operator that was passed in to the function.
<\/p>\n\n\n\n
Once you have a handle on this, I recommend taking a look at how to sort an array of items by the date they were added to the array, ascending or descending. Have fun and keep at it! <\/p>\n","protected":false},"excerpt":{"rendered":"One thing we can do when solving coding problems is use the Date Object to compare dates and times to conditionally render certain logic in our code. This article takes a look at how to use the Date Object to compare two dates to see which one is the later (or earlier) date. The Setup…","protected":false},"author":77,"featured_media":4142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-23105","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"\n
JavaScript Date Object: How to Compare Dates | Career Karma<\/title>\n<meta name=\"description\" content=\"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Date Object: How to Compare Dates\" \/>\n<meta property=\"og:description\" content=\"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-24T06:15:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-06T03:00:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"JavaScript Date Object: How to Compare Dates\",\"datePublished\":\"2020-09-24T06:15:25+00:00\",\"dateModified\":\"2020-10-06T03:00:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/\"},\"wordCount\":501,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/estee-janssens-zni0zgb3bkQ-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/\",\"name\":\"JavaScript Date Object: How to Compare Dates | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/estee-janssens-zni0zgb3bkQ-unsplash.jpg\",\"datePublished\":\"2020-09-24T06:15:25+00:00\",\"dateModified\":\"2020-10-06T03:00:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/estee-janssens-zni0zgb3bkQ-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/estee-janssens-zni0zgb3bkQ-unsplash.jpg\",\"width\":1200,\"height\":803},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-compare-dates\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Date Object: How to Compare Dates\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Date Object: How to Compare Dates | Career Karma","description":"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Date Object: How to Compare Dates","og_description":"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!","og_url":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-09-24T06:15:25+00:00","article_modified_time":"2020-10-06T03:00:55+00:00","og_image":[{"width":1200,"height":803,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"JavaScript Date Object: How to Compare Dates","datePublished":"2020-09-24T06:15:25+00:00","dateModified":"2020-10-06T03:00:55+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/"},"wordCount":501,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/","url":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/","name":"JavaScript Date Object: How to Compare Dates | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg","datePublished":"2020-09-24T06:15:25+00:00","dateModified":"2020-10-06T03:00:55+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"JavaScript Date Objects can be a little confusing at first. Dive in to a primer on how to compare two dates in JavaScript here on Career Karma!","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/07\/estee-janssens-zni0zgb3bkQ-unsplash.jpg","width":1200,"height":803},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-compare-dates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Date Object: How to Compare Dates"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=23105"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23105\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/4142"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=23105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=23105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=23105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}