Im wondering if anyone can point me to some documentation on how to solve my issue. Still new at native JS, and looking to do some date calculations.
Basically 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. Kind regards
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>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
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>