Shantanu Jana

Posted on

# How to Get Days Between two Dates in JavaScript

This tutorial will help you to know how to make Days Between two Dates calculator using JavaScript. Using this type of project you can calculate the time interval between two dates.

If you want to calculate how many days are left between two specific dates then you can use this get days between two dates javascript project.

✅✅ Live Preview 👉👉 Days Between Two Dates JavaScript

Here html's date input (`type="date"`) is used. Which will help you to select the date. You can also input the date manually.

Here I have used HTML, CSS and JavaScript. After inputting the date, click on the submit button and you will see the time difference between the two dates.

## Get Days Between two Dates in JavaScript

First a box was created on the web page. I first added a heading to the box. Then two input boxes were made for input. Input boxes were made. I have used the type date of the input box here.

This calculator will determine the interval between the two dates. Then who will turn that time into seconds. Then turn that time into day again. If you want, you can view this information as hours, minutes, seconds instead of days.

### HTML Code:

I have added the necessary information of this Get Days Between two Dates calculator using the following html. First the basic structure was created.

Then the heading and input box. Then there is a submit button. At the end of all there is a display in which the calculated results can be seen.

``````<!--Basic structure of calculator-->
<div class="container">
<!--Two input spaces-->
<div class="inp-wrapper">
<!--Place to input 1st date-->
<div class="date-wrapper">
<label for="date-1">Start Date</label>
<input type="date" id="date-1" />
</div>
<!--Place to input 2nd date -->
<div class="date-wrapper">
<label for="date-2">End Date</label>
<input type="date" id="date-2" />
</div>
</div>
<!-- Submit button -->
<button id="submit">Submit</button>
<!-- Display -->
<div id="output">Select the dates to get started</div>
</div>
``````

### CSS Code:

Now all the information has been designed by css. The background color of the webpage is blue and the background of the calculator is white.

``````/*Basic design of webpage*/
* {
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
body {
height: 100vh;
background: rgb(94, 169, 233);
}
/*Basic design of calculator*/
.container {
width: 70vw;
max-width: 37.5em;
background-color: #f6f9fa;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
background: rgb(18, 128, 207);
color: white;
margin: -48px -16px 50px -16px;
font-size: 23px;
text-align: center;
}
/*Design a place to input*/
.inp-wrapper {
display: flex;
justify-content: space-around;
gap: 1.2em;
}
label {
color: #0f1e32;
display: block;
font-weight: 600;
}
input[type="date"] {
font-size: 16px;
color: #242831;
border: 2px solid rgb(7, 108, 147);
outline: none;
margin-top: 0.6em;
}
::-webkit-calendar-picker-indicator {
background-color: #7eceee;
cursor: pointer;
}
/*Design the Calculate button*/
button {
display: block;
background-color: #1a78db;
color: #ffffff;
font-size: 18px;
margin: 2.2em auto 2em auto;
border: none;
font-weight: 500;
}
/*Display viewing results*/
#output {
background-color: rgba(255, 255, 255, 0.15);
text-align: center;
margin: 0px 30px 0px 30px;
color: #0a49c7;
font-size: 1.2em;
letter-spacing: 0.05em;
}
#output span {
color: #18f08b;
font-size: 1.4em;
font-weight: 600;
}
/*The following code has been used to make it responsive*/
@media screen and (max-width: 550px) {
.container {
}
.inp-wrapper {
flex-direction: column;
}
.date-wrapper {
display: flex;
align-items: center;
flex-direction: column;
}
}
``````

### JavaScript:

Now is the time to activate this Get Number of Days Between Dates project using JavaScript. Of course, you need to have a basic idea about JavaScript.

``````   //The 'Submit Button' and 'Display' ids are set to constant
let submit = document.getElementById("submit");
let output = document.getElementById("output");

//Create a Date object from input value
let date1 = new Date(document.getElementById("date-1").value);
let date2 = new Date(document.getElementById("date-2").value);

//Check if the input dates are valid
//If valid calculate the difference
if (date1.getTime() && date2.getTime()) {
//Calculate difference in time using getTime function
//getTime calculates number of years since January 1,1970
let timeDifference = date2.getTime() - date1.getTime();

//Since this value is in milliseconds we need to convert it into days
//We want the difference to be a non-negative number. Hence we use Math.abs()
let dayDifference = Math.abs(timeDifference / (1000 * 3600 * 24));
//InnerHTML is a property of the HTML DOM.
output.innerHTML = `Difference between the two dates is <span>\${dayDifference}</span> days`;
}

//Else display that the input is valid
else {
output.innerHTML = "Please select a valid date";
}
});
``````

Hopefully you have been able to create this Get Days Between two Dates in JavaScript using the above code.

Related Post:

If there is any problem, you can definitely comment. Use the link below for all the source code.

Useful but maybe must in codepen 👍❤️

Spandan

Amazing post.
Very useful
I calculated days between today and my bday
14 days left. yaaay :)
Keep it up!

DEV Community

Let's see what you can do with JavaScript and a bit of creativity