Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript

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 help you completely.

If you want you can calculate your age using this calculator. Although I have already shared many types of JavaScript age calculator tutorials for calculating age. 

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.

Days Between Two Dates JavaScript

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. 

If you are a beginner then follow the tutorial below to make Days Between Two Dates calculator.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

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. 

Those input boxes are mainly for date input (type = “date”). The difference between the two dates will be calculated. We get many types of input functions in HTML. Notable among them are password (type = “password”), text (type = “text”), file (type = “file”), color (type = “color”), etc. 

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.

How to get data between two dates in javascript

Then there is a button that can be clicked to know the difference between these two dates. 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 difference between the two dates in the display or box below.

I used only HTML, CSS, and JavaScript to create this Days Between Two Dates project. No jQuery was used here and I gave the necessary explanations for each line.

Step 1: Basic structure of calculator

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.

<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Rubik”, sans-serif;
}
body {
height: 100vh;
background: rgb(94, 169, 233);
}
.container {
width: 70vw;
max-width: 37.5em;
background-color: #f6f9fa;
padding: 3em 1em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Basic structure of calculator

Step 2: Title of Days Between Two Dates calculator

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.

<div class=”heading”>Days Between Two Dates</div>
.heading{
background: rgb(18, 128, 207);
color: white;
margin: -48px -16px 50px -16px;
font-size: 23px;
padding: 5px;
text-align: center;
}
Title of Days Between Two Dates calculator

Step 3: Create two date input spaces

In 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. 

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.

<div class=”inp-wrapper”>
  <div class=”date-wrapper”>
    <label for=”date-1″>Start Date</label>
    <input type=”date” id=”date-1″ />
  </div>
  <div class=”date-wrapper”>
     <label for=”date-2″>End Date</label>
     <input type=”date” id=”date-2″ />
  </div>
</div>
.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;
padding: 1em;
color: #242831;
border: 2px solid rgb(7, 108, 147);
outline: none;
border-radius: 0.2em;
margin-top: 0.6em;
}
::-webkit-calendar-picker-indicator {
background-color: #7eceee;
padding: 0.2em;
cursor: pointer;
border-radius: 0.1em;
}
Create two date input spaces

Step 4: Create a button to calculate the date

Now 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.

<button id=”submit”>Submit</button>
button {
display: block;
background-color: #1a78db;
color: #ffffff;
font-size: 18px;
margin: 2.2em auto 2em auto;
border: none;
padding: 0.7em 2em;
border-radius: 0.3em;
font-weight: 500;
}
Create a button to calculate the date

Step 5: Create a result viewing display

Now 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.

 <div id=”output”>Select the dates to get started</div>
#output {
background-color: rgba(255, 255, 255, 0.15);
text-align: center;
padding: 1em;
margin: 0px 30px 0px 30px;
color: #0a49c7;
font-size: 1.2em;
letter-spacing: 0.05em;
box-shadow: 0 0 20px rgba(0,139,253,0.45);
}
#output span {
color: #18f08b;
font-size: 1.4em;
font-weight: 600;
}
Create a result viewing display

Step 6: Make the date calculator responsive

Now 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.

@media screen and (max-width: 550px) {
.container {
  padding: 4em 2em;
}
.inp-wrapper {
  flex-direction: column;
}
.date-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}
}

Step 7: Activate Days Between Two Dates Calculator

Above I have added the necessary information using HTML and CSS. Now is the time to implement it with JavaScript.

Now the Days Between Two Dates project 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’t use any HTML function directly in JavaScript.

let submit = document.getElementById(“submit”);
let output = document.getElementById(“output”);

Below I gave all the calculations and shared the information if necessary. I hope those explanations will help you understand your JavaScript code.

submit.addEventListener(“click”, () => {
  //The values of the two input boxes have been collected. 
//That value is stored between a constant called ‘date1’ and ‘date2’, respectively.
  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));
    output.innerHTML = `Difference between the two dates is <span>${dayDifference}</span> days`;
  }
  //If the above conditions are not met and you click on the submit button, you will see the following text.
  else {
    output.innerHTML = “Please select a valid date”;
  }
});
Days Between Two Dates Calculator using javascript

Hopefully, the above tutorial has helped you to create this Days Between Two Dates javascript. If there is any problem then you can definitely let me know by commenting. 

Earlier I shared a tutorial on making a JavaScript age calculator. Use the button below to download the source code of this project (get days between two dates javascript).