CODEWITHSUNDEEP
javascripthtml
Malthe22
Malthe22

Reputation: 15

Calculate duration startDate & endDate from an HTML form

Can anyone point me to some documentation on how to solve my issue?

I need to calculate the duration between X and Y dates from and HTML forms input type date.

I have a rough sketch of my HTML and JS.. but still I cannot solve the issue without propper guidance and documentation.

       <div>
          <form>
              <label for="start-date"></label>
              <input type="date" id="start-date">

              <label for="end-date"></label>
              <input type="date" id="end-date">

              <label for="duration"></label>
              <input type="text" id="duration">
         </form>
       </div>


    const startDate = document.getElementById("start-date").value
    const endDate = document.getElementById("end-date").value
    let duration_from_form = document.getElementById("duration").value

    let duration = endDate - startDate;


    if (duration_from_form === ""){
        duration_from_form = duration;
    }
}

I know both of them a rough mockups and not ideal, but I'd love some help finding propper documentation on this matter.

Upvotes: 1

Views: 1707

Answers (3)

Anil Parshi
Anil Parshi

Reputation: 913

Here's how you can find your date difference with the help of Jquery

const setup = () => {
  let firstDate = $('#start-date').val();
  let secondDate = $('#end-date').val();
  const findTheDifferenceBetweenTwoDates = (firstDate, secondDate) => {
  firstDate = new Date(firstDate);
    secondDate = new Date(secondDate);
    
    let timeDifference = Math.abs(secondDate.getTime() - firstDate.getTime());
    
    let millisecondsInADay = (1000 * 3600 * 24);
    
    let differenceOfDays = Math.ceil(timeDifference / millisecondsInADay);
    
    return differenceOfDays;
    
  }
  
  let result = findTheDifferenceBetweenTwoDates(firstDate, secondDate);
  $("#duration").val(result);  
  
}

$(document).ready(function () {
  $('#start-date').change(function () {
    if($('#end-date').val()!='')
    {
      setup();
    }
  })
  $('#end-date').change(function () {
    if($('#start-date').val()!='')
    {
      setup();
    }
  })
});
.container {
  position: absolute;
  top: 10%;
  width: 100%;
  text-align: center;
  color: black;
  font-style: italic;
  font-family: avenir;
  margin: 10px;
}

input {
  width: 20%;
  height: 30px;
  font-family: avenir;
}

input:focus {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <form>
        <label for="start-date"></label>
        <input type="date" id="start-date">

        <label for="end-date"></label>
        <input type="date" id="end-date">

        <label for="duration"></label>
        <input type="text" id="duration" placeholder="Difference">
   </form>
 </div>

Upvotes: 0

Daljeet
Daljeet

Reputation: 1

function getTimeBetweenDates(e) {
  var date1 = new Date(document.getElementById("date1").value);
  var date2 = new Date(document.getElementById("date2").value);

  var diff;

  if (date1 < date2) {
    diff = new Date(date2 - date1);
  } else {
    diff = new Date(date1 - date2);
  }

  var years = (diff.getFullYear() - 1970);
  var months = diff.getMonth();
  var days = diff.getDate();

  var yearTxt = "year";
  var monthTxt = "month";
  var dayTxt = "day";

  if (years > 1) yearTxt += "s";
  if (months > 1) monthTxt += "s";
  if (days > 1) dayTxt += "s";

  if (years >= 0) {
    document.getElementById("showdiff").innerHTML = years + " " + yearTxt + ", " + months + " " + monthTxt + ", " + days + " " + dayTxt;
  } else {
    document.getElementById("showdiff").innerHTML = "Equal dates";
  }
}
<form id="form1" action="" method="" onSubmit="event.preventDefault(); getTimeBetweenDates();">
  <input type="date" id="date1">
  <input type="date" id="date2">
</form>

<br>
<button type="submit" form="form1" value="Send">Send</button>

<br>
<p id="showdiff"></p>

Upvotes: 0

akshay kishore
akshay kishore

Reputation: 1027

If you want Date calculations and more documentation on how to play with dates then try this, Dates -JS MDN

But if you are looking to set the value in the field then

 document.getElementById("duration").value = duration

should be written in the onChange event of the field, more on that here enter link description here

Upvotes: 1

Related Questions