{"id":108,"date":"2022-03-11T22:08:00","date_gmt":"2022-03-11T22:08:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2022\/03\/11\/days-between-two-dates-using-javascript-css\/"},"modified":"2023-01-05T19:47:20","modified_gmt":"2023-01-05T19:47:20","slug":"days-between-two-dates-using-javascript-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/days-between-two-dates-using-javascript-css\/","title":{"rendered":"Days Between Two Dates Using JavaScript &#038; CSS"},"content":{"rendered":"<style>\n  p{font-size:19px;<br \/>\n    color: #292828;<br \/>\n    font-family: sans-serif;<br \/>\n    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhxL6WFD5u4ikodGe3nxVKGqr-CMtPW4O_tKzIobPqcoXoHlftBt4i2Lf1Hzhb83wGvCRk0ozOilbR4BJRI1LX4vfHJMYZ5T92RW7dDJAMY4RmPW7OyYG7HaTn5t2Ca3wMRySnSjbxis4r3bfnzGKHW8tWX05vCHUNHD5vzw5irFQkyjXE8_JHX359Atw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Days Between Two Dates Using JavaScript\" border=\"0\" data-original-height=\"526\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhxL6WFD5u4ikodGe3nxVKGqr-CMtPW4O_tKzIobPqcoXoHlftBt4i2Lf1Hzhb83wGvCRk0ozOilbR4BJRI1LX4vfHJMYZ5T92RW7dDJAMY4RmPW7OyYG7HaTn5t2Ca3wMRySnSjbxis4r3bfnzGKHW8tWX05vCHUNHD5vzw5irFQkyjXE8_JHX359Atw=s16000\" title=\"In this tutorial, you will learn how to create Days Between Two Dates JavaScript. This type of project helps to calculate the distance between two specific dates.\"><\/a><\/div>\n<p style=\"text-align: left;\">In this tutorial, you will learn how to create <strong>Days Between Two Dates JavaScript<\/strong>. This type of project helps to calculate the <strong>distance between two specific dates<\/strong>. A lot of times we have to find the <a href=\"https:\/\/www.javatpoint.com\/calculate-days-between-two-dates-in-javascript\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">data between two dates<\/span><\/a> in a list. In that case, this project (get days between two dates javascript) will help you completely.<\/p>\n<p>If you want you can calculate your age using this calculator. Although I have already shared many types of <a href=\"https:\/\/foolishdeveloper.com\/2021\/07\/javascript-age-calculator.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">JavaScript age calculator tutorials<\/span><\/a> for calculating age.&nbsp;<\/p>\n<p style=\"text-align: left;\">The calculated time here can only be seen in the form of days. That is, the number of days between the two dates can be seen here. You will not see any other type of time (hours, minutes, seconds) here.<\/p>\n<h2 style=\"font-size: 32px; text-align: left;\">Days Between Two Dates JavaScript<\/h2>\n<p style=\"text-align: left;\">Below I have given a preview that will help you to know how this project (calculate days between two dates) works. Below you will find all the source codes. But for beginners, I have shared step-by-step tutorials.&nbsp;<\/p>\n<p style=\"text-align: left;\">If you are a beginner then follow the tutorial below to <strong>make Days Between Two Dates calculator<\/strong>.<\/p>\n<p class=\"codepen\" data-default-tab=\"result\" data-editable=\"true\" data-height=\"463\" data-preview=\"true\" data-slug-hash=\"GROLxrL\" data-theme-id=\"light\" data-user=\"foolishdevweb\" style=\"align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 463px; justify-content: center; margin: 1em 0px; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/foolishdevweb\/pen\/GROLxrL\" target=\"_blank\" rel=\"noopener\"><br \/>\nUntitled<\/a> by Foolish Developer (<a href=\"https:\/\/codepen.io\/foolishdevweb\" target=\"_blank\" rel=\"noopener\">@foolishdevweb<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p style=\"text-align: left;\">\n<p style=\"text-align: left;\">As you can see above, the background color of a web page is blue. And a box has been made on it. I first used a heading in this box. The background color of this heading is blue and the text color is white. Then there are the two input boxes.&nbsp;<\/p>\n<p style=\"text-align: left;\">Those input boxes are mainly for date input <u>(type = &#8220;date&#8221;)<\/u>. The difference between the two dates will be calculated. We get many types of input functions in HTML. Notable among them are password <span style=\"color: #2b00fe;\">(type = &#8220;password&#8221;)<\/span>, text <span style=\"color: #2b00fe;\">(type = &#8220;text&#8221;),<\/span> file <span style=\"color: #2b00fe;\">(type = &#8220;file&#8221;)<\/span>, color <span style=\"color: #2b00fe;\">(type = &#8220;color&#8221;)<\/span>, etc.&nbsp;<\/p>\n<p style=\"text-align: left;\">A type of input with the same date is available. Which will basically help to select a date. Here you can select the date or manually input the date of your choice here.<\/p>\n<h2 style=\"font-size: 30px; text-align: left;\">How to get data between two dates in javascript<\/h2>\n<p style=\"text-align: left;\">Then there is a button that can be clicked to know the <a href=\"https:\/\/www.tutorialspoint.com\/How-to-get-the-number-of-days-between-two-Dates-in-JavaScript\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">difference between these two dates<\/span><\/a>. At the end of all, there is a display in which the results can be seen. This means that when you click on the submit button, you can see the <b>difference between the two dates<\/b> in the display or box below.<\/p>\n<p>I used only HTML, CSS, and JavaScript to create this <strong>Days Between Two Dates project<\/strong>. No jQuery was used here and I gave the necessary explanations for each line.<\/p>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1:<\/span>&nbsp;Basic structure of calculator<\/h3>\n<p style=\"text-align: left;\">I have created the basic structure of this project using the following HTML and CSS. The width of this project: 70vw and light blue color has been used in the background.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;container&#8221;&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">* {<\/div>\n<div class=\"class\">padding: 0;<\/div>\n<div class=\"class\">margin: 0;<\/div>\n<div class=\"class\">box-sizing: border-box;<\/div>\n<div class=\"class\">font-family: &#8220;Rubik&#8221;, sans-serif;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">body {<\/div>\n<div class=\"class\">height: 100vh;<\/div>\n<div class=\"class\">background: rgb(94, 169, 233);<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">.container {<\/div>\n<div class=\"class\">width: 70vw;<\/div>\n<div class=\"class\">max-width: 37.5em;<\/div>\n<div class=\"class\">background-color: #f6f9fa;<\/div>\n<div class=\"class\">padding: 3em 1em;<\/div>\n<div class=\"class\">position: absolute;<\/div>\n<div class=\"class\">transform: translate(-50%, -50%);<\/div>\n<div class=\"class\">top: 50%;<\/div>\n<div class=\"class\">left: 50%;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEii2jNTRx-KQ1JWRGAAcUNkaLTChinCQbd6Qg0RniFgAWcDfYp4XI8e8pQTjN-sa5_q-M-ht3-yUJzGzfiiBf6IbAzuhS7zSuPJnSlpXOSEa-QnDzUn080JGI3BCPh3XxKEu3sQP9OwGlBejwBxfuoFyDuXGeNT_7bl8E_cPF36Q_y4Z0fRIo1wiLxRqw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Basic structure of calculator\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEii2jNTRx-KQ1JWRGAAcUNkaLTChinCQbd6Qg0RniFgAWcDfYp4XI8e8pQTjN-sa5_q-M-ht3-yUJzGzfiiBf6IbAzuhS7zSuPJnSlpXOSEa-QnDzUn080JGI3BCPh3XxKEu3sQP9OwGlBejwBxfuoFyDuXGeNT_7bl8E_cPF36Q_y4Z0fRIo1wiLxRqw=s16000\" title=\"Basic structure of calculator\"><\/a><\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:<\/span>&nbsp;Title of Days Between Two Dates calculator<\/h3>\n<p style=\"text-align: left;\">Now I have added a heading using the following codes. This heading will only help to enhance the beauty. Using margins I determined the position of the heading. The background color is blue and the text color is white.<\/p>\n<div class=\"class\">&lt;div class=&#8221;heading&#8221;&gt;Days Between Two Dates&lt;\/div&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">.heading{<\/div>\n<div class=\"class\">background: rgb(18, 128, 207);<\/div>\n<div class=\"class\">color: white;<\/div>\n<div class=\"class\">margin: -48px -16px 50px -16px;<\/div>\n<div class=\"class\">font-size: 23px;<\/div>\n<div class=\"class\">padding: 5px;<\/div>\n<div class=\"class\">text-align: center;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhYTXXxgaNsSR84OvMMr5KTiPkV2ElJBn0Hl7mMTJDEHASzkAt1LPEblyedClrnlu61P84q0DVM4_HBiS8N8YS7yO5sPOZ10xrOYEhL7xLwiUe1x5EQrUzwfBfAFfFlW3CadoGtIletTTLqasOarsqPXnvbznlItiuG4zhQFwV28Tj6q_LFQGLrdbmizA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Title of Days Between Two Dates calculator\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhYTXXxgaNsSR84OvMMr5KTiPkV2ElJBn0Hl7mMTJDEHASzkAt1LPEblyedClrnlu61P84q0DVM4_HBiS8N8YS7yO5sPOZ10xrOYEhL7xLwiUe1x5EQrUzwfBfAFfFlW3CadoGtIletTTLqasOarsqPXnvbznlItiuG4zhQFwV28Tj6q_LFQGLrdbmizA=s16000\" title=\"Title of Days Between Two Dates calculator\"><\/a><\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:<\/span>&nbsp;Create two date input spaces<span><!--more--><\/span><\/h3>\n<p style=\"text-align: left;\">\nIn this project (How to count the number of days between two dates) I have used two input boxes. I have used date piker here which is a kind of input function.&nbsp;<\/p>\n<p style=\"text-align: left;\">The input boxes do not have a specific size. It has set its own size on the padding. Also used a blue border of two pixels here.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;inp-wrapper&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;date-wrapper&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;label for=&#8221;date-1&#8243;&gt;Start Date&lt;\/label&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;input type=&#8221;date&#8221; id=&#8221;date-1&#8243; \/&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;date-wrapper&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;label for=&#8221;date-2&#8243;&gt;End Date&lt;\/label&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;input type=&#8221;date&#8221; id=&#8221;date-2&#8243; \/&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">.inp-wrapper {<\/div>\n<div class=\"class\">display: flex;<\/div>\n<div class=\"class\">justify-content: space-around;<\/div>\n<div class=\"class\">gap: 1.2em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">label {<\/div>\n<div class=\"class\">color: #0f1e32;<\/div>\n<div class=\"class\">display: block;<\/div>\n<div class=\"class\">font-weight: 600;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">input[type=&#8221;date&#8221;] {<\/div>\n<div class=\"class\">font-size: 16px;<\/div>\n<div class=\"class\">padding: 1em;<\/div>\n<div class=\"class\">color: #242831;<\/div>\n<div class=\"class\">border: 2px solid rgb(7, 108, 147);<\/div>\n<div class=\"class\">outline: none;<\/div>\n<div class=\"class\">border-radius: 0.2em;<\/div>\n<div class=\"class\">margin-top: 0.6em;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">::-webkit-calendar-picker-indicator {<\/div>\n<div class=\"class\">background-color: #7eceee;<\/div>\n<div class=\"class\">padding: 0.2em;<\/div>\n<div class=\"class\">cursor: pointer;<\/div>\n<div class=\"class\">border-radius: 0.1em;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEj1Jsp2RUgPJKqLLWP0AmToskrHNG72mhEXU3SAv71DlopbqoOPGIKvpSfDMnUp18mkmkhvqsWRi_6AKyDONKKMjLi_DJjASlFvUMoYIrdtq799Dltq_MLTkDATy8-6_NHl9rr1zXidLE0Ew9misNsSEVKxECm_N917Km7o3SdWcSUnMKwqBCNI2FRX0A\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create two date input spaces\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEj1Jsp2RUgPJKqLLWP0AmToskrHNG72mhEXU3SAv71DlopbqoOPGIKvpSfDMnUp18mkmkhvqsWRi_6AKyDONKKMjLi_DJjASlFvUMoYIrdtq799Dltq_MLTkDATy8-6_NHl9rr1zXidLE0Ew9misNsSEVKxECm_N917Km7o3SdWcSUnMKwqBCNI2FRX0A=s16000\" title=\"Create two date input spaces\"><\/a><\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 4:<\/span>&nbsp;Create a button to calculate the date<\/h3>\n<p style=\"text-align: left;\">\nNow I have created the submit button. This button will calculate the information of the two dates. I have used blue color in the background of the button and the size depends on the padding.<\/p>\n<div class=\"class\">&lt;button id=&#8221;submit&#8221;&gt;Submit&lt;\/button&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">button {<\/div>\n<div class=\"class\">display: block;<\/div>\n<div class=\"class\">background-color: #1a78db;<\/div>\n<div class=\"class\">color: #ffffff;<\/div>\n<div class=\"class\">font-size: 18px;<\/div>\n<div class=\"class\">margin: 2.2em auto 2em auto;<\/div>\n<div class=\"class\">border: none;<\/div>\n<div class=\"class\">padding: 0.7em 2em;<\/div>\n<div class=\"class\">border-radius: 0.3em;<\/div>\n<div class=\"class\">font-weight: 500;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjysueXgjQDlRBosFuQpo0BksNVewbzJ780GOGQSlKLMx8qT-sMdStzpW8QvUEkZPbVjVucFhwEotz4HXpkfnj1SU2lWH0AjeLzM9HFvglxT6YVG5djc8HDcUZ98FyAsBWBOhXnPH4lKxdugWFEIhnPC542vudToN0i93mHXRpgzvQcCiHhZKbire_rTA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create a button to calculate the date\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjysueXgjQDlRBosFuQpo0BksNVewbzJ780GOGQSlKLMx8qT-sMdStzpW8QvUEkZPbVjVucFhwEotz4HXpkfnj1SU2lWH0AjeLzM9HFvglxT6YVG5djc8HDcUZ98FyAsBWBOhXnPH4lKxdugWFEIhnPC542vudToN0i93mHXRpgzvQcCiHhZKbire_rTA=s16000\" title=\"Create a button to calculate the date\"><\/a><\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 5:&nbsp;<\/span>Create a result viewing display<\/h3>\n<p style=\"text-align: left;\">\nNow is the time to create a display in which these calculations can be seen. The size of the display has been determined above the padding. And around this display, I have used shadows which have enhanced its beauty a lot more.<\/p>\n<div class=\"class\">&nbsp;&lt;div id=&#8221;output&#8221;&gt;Select the dates to get started&lt;\/div&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">#output {<\/div>\n<div class=\"class\">background-color: rgba(255, 255, 255, 0.15);<\/div>\n<div class=\"class\">text-align: center;<\/div>\n<div class=\"class\">padding: 1em;<\/div>\n<div class=\"class\">margin: 0px 30px 0px 30px;<\/div>\n<div class=\"class\">color: #0a49c7;<\/div>\n<div class=\"class\">font-size: 1.2em;<\/div>\n<div class=\"class\">letter-spacing: 0.05em;<\/div>\n<div class=\"class\">box-shadow: 0 0 20px rgba(0,139,253,0.45);<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">#output span {<\/div>\n<div class=\"class\">color: #18f08b;<\/div>\n<div class=\"class\">font-size: 1.4em;<\/div>\n<div class=\"class\">font-weight: 600;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhHKraXWGSWoSaInSeaIgPF_PbLcSaEm_gicn5RNLIvOe788aYFWc1bCK0TC8zHX6u5speris4VJ4QyzUusMi3a1Gk_3h570zQWzBpN-PVv2BG5uPh3ax5H-Gx08OAfMdGkjHUTj4vH6EASvzh0Yk70-9xRLu_FvxwT1FQ_z0nD1XTcwcyGPscIQRSoxg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create a result viewing display\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhHKraXWGSWoSaInSeaIgPF_PbLcSaEm_gicn5RNLIvOe788aYFWc1bCK0TC8zHX6u5speris4VJ4QyzUusMi3a1Gk_3h570zQWzBpN-PVv2BG5uPh3ax5H-Gx08OAfMdGkjHUTj4vH6EASvzh0Yk70-9xRLu_FvxwT1FQ_z0nD1XTcwcyGPscIQRSoxg=s16000\" title=\"Create a result viewing display\"><\/a><\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 6:<\/span>&nbsp;Make the date calculator responsive<\/h3>\n<p style=\"text-align: left;\">\nNow using some amount of code has made this day Between Two Dates javascript responsive. This means that when it is used from a smaller device, its size will become smaller.<\/p>\n<div class=\"class\">\n<div class=\"class\">@media screen and (max-width: 550px) {<\/div>\n<div class=\"class\">.container {<\/div>\n<div class=\"class\">&nbsp; padding: 4em 2em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.inp-wrapper {<\/div>\n<div class=\"class\">&nbsp; flex-direction: column;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.date-wrapper {<\/div>\n<div class=\"class\">&nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; align-items: center;<\/div>\n<div class=\"class\">&nbsp; flex-direction: column;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<h3 style=\"font-size: 27px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 7:&nbsp;<\/span>Activate Days Between Two Dates Calculator<\/h3>\n<p style=\"text-align: left;\">\n<p>Above I have added the necessary information using HTML and CSS. Now is the time to implement it with JavaScript.<\/p>\n<div style=\"text-align: left;\">\n<p style=\"text-align: left;\">Now the <strong>Days Between Two Dates project<\/strong> has been activated using JavaScript. First, we have determined the constant of two ID functions. Here the constant of display and submit button IDs are determined. Because I can&#8217;t use any HTML function directly in JavaScript.<\/p>\n<div class=\"class\">\n<div class=\"class\">let submit = document.getElementById(&#8220;submit&#8221;);<\/div>\n<div class=\"class\">let output = document.getElementById(&#8220;output&#8221;);<\/div>\n<\/div>\n<p style=\"text-align: left;\">\nBelow I gave all the calculations and shared the information if necessary. I hope those explanations will help you understand your JavaScript code.<\/p>\n<div class=\"class\">\n<div class=\"class\">submit.addEventListener(&#8220;click&#8221;, () =&gt; {<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; <span style=\"color: #05a828;\">\/\/The values of the two input boxes have been collected.&nbsp;<\/span><\/div>\n<div class=\"class\"><span style=\"color: #05a828;\">\/\/That value is stored between a constant called &#8216;date1&#8217; and &#8216;date2&#8217;, respectively.<\/span><\/div>\n<div class=\"class\">&nbsp; let date1 = new Date(document.getElementById(&#8220;date-1&#8221;).value);<\/div>\n<div class=\"class\">&nbsp; let date2 = new Date(document.getElementById(&#8220;date-2&#8221;).value);<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; <span style=\"color: #05a828;\">\/\/Check if the input dates are valid<\/span><\/div>\n<div class=\"class\"><span style=\"color: #05a828;\">&nbsp; \/\/If valid calculate the difference<\/span><\/div>\n<div class=\"class\">&nbsp; if (date1.getTime() &amp;&amp; date2.getTime()) {<\/div>\n<div class=\"class\">&nbsp; &nbsp; \/<span style=\"color: #05a828;\">\/Calculate difference in time using getTime function<\/span><\/div>\n<div class=\"class\"><span style=\"color: #05a828;\">&nbsp; &nbsp; \/\/getTime calculates number of years since January 1,1970<\/span><\/div>\n<div class=\"class\">&nbsp; &nbsp; let timeDifference = date2.getTime() &#8211; date1.getTime();<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;<span style=\"color: #05a828;\"> &nbsp; \/\/Since this value is in milliseconds we need to convert it into days<\/span><\/div>\n<div class=\"class\"><span style=\"color: #05a828;\">&nbsp; &nbsp; \/\/We want the difference to be a non-negative number. Hence we use Math.abs()<\/span><\/div>\n<div class=\"class\">&nbsp; &nbsp; let dayDifference = Math.abs(timeDifference \/ (1000 * 3600 * 24));<\/div>\n<div class=\"class\">&nbsp; &nbsp; output.innerHTML = `Difference between the two dates is &lt;span&gt;${dayDifference}&lt;\/span&gt; days`;<\/div>\n<div class=\"class\">&nbsp; }<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; <span style=\"color: red;\">\/\/If the above conditions are not met and you click on the submit button, you will see the following text.<\/span><\/div>\n<div class=\"class\">&nbsp; else {<\/div>\n<div class=\"class\">&nbsp; &nbsp; output.innerHTML = &#8220;Please select a valid date&#8221;;<\/div>\n<div class=\"class\">&nbsp; }<\/div>\n<div class=\"class\">});<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEh86yd14Nqs5MeEu1g4r30xiKmzGFwhMEBR_-mojlIJY954D8_fCWJ2FbsmWOJwWRmKhkd4q59hv7LbfwrOXIS6QfSK6mz4QOcCv9r-Je_hfw8kWeP3cQja1Spou5a07UynLW6KoEVZ1LJTBNpIe9bb4IaRTIaSLYUaU_Ry6dLvdBYX-9lr38MfKYT6HQ\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Days Between Two Dates Calculator using javascript\" border=\"0\" data-original-height=\"461\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEh86yd14Nqs5MeEu1g4r30xiKmzGFwhMEBR_-mojlIJY954D8_fCWJ2FbsmWOJwWRmKhkd4q59hv7LbfwrOXIS6QfSK6mz4QOcCv9r-Je_hfw8kWeP3cQja1Spou5a07UynLW6KoEVZ1LJTBNpIe9bb4IaRTIaSLYUaU_Ry6dLvdBYX-9lr38MfKYT6HQ=s16000\" title=\"Days Between Two Dates Calculator using javascript\"><\/a><\/div>\n<p style=\"text-align: left;\">\n<p>Hopefully, the above tutorial has helped you to create this <strong>Days Between Two Dates javascript<\/strong>. If there is any problem then you can definitely let me know by commenting.&nbsp;<\/p>\n<p style=\"text-align: left;\">Earlier I shared a tutorial on making a <a href=\"https:\/\/foolishdeveloper.com\/2021\/07\/javascript-age-calculator.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">JavaScript age calculator<\/span><\/a>. Use the button below to download the source code of this project (get days between two dates javascript).<\/p>\n<p><script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button class=\"last-btn\" id=\"btnx\" onclick=\"generate()\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=1lDbJkIbYItqVwyZZuqc-arktP4Bu3snd\" id=\"downloadx\" style=\"display: none;\" target=\"_blank\" rel=\"noopener\"><i aria-hidden=\"true\" class=\"fa fa-cloud-download fa-fw\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to create Days Between Two Dates JavaScript. This type of project helps to calculate the distance between two specific dates. A lot of times we have to find the data between two dates in a list. In that case, this project (get days between two dates javascript) will [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":877,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[40,67,12,142,14,13],"tags":[],"class_list":["post-108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best_javascript","category-calculator","category-css","category-days-between-two-dates","category-html","category-javascript","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":1,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/108\/revisions\/878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/877"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}