How to subtract two dates and get the difference in HTML
Question
I'm trying to subtract two HTML date types and extract the difference, in days.
ci and co stand for check in and check out
document.getElementById('co').valueAsDate = new Date(86400000 + +new Date()) document.getElementById('ci').valueAsDate = new Date(); var date1 = document.getElementById('ci').value; var date2 = document.getElementById('co').value; const diffTime = Math.abs(date2 - date1); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // find diffdate document.getElementById('diffday').value = diffDays;
<input id="ci" type="date" class="datepicker" min="1"> <input id="co" type="date" class="datepicker"> <input id="diffday" type="number" min="0"> <label for="day">diffday</label>
2 answers
solution1
1 2020-06-15 12:17:18
Make sure you are retrieving the input field value as a date and not a string.
You already used valueAsDate to set the value, so use it again for retrieval.
const DAY_IN_MILLIS = 1000 * 60 * 60 * 24; const main = () => { let now = new Date(); document.getElementById('co').valueAsDate = new Date(DAY_IN_MILLIS + +now) document.getElementById('ci').valueAsDate = now; // Add change event listeners Array.from(document.querySelectorAll('.datepicker')).forEach(dp => { dp.addEventListener('change', onDateChange); }); triggerEvent(document.getElementById('co'), 'change'); // Trigger change }; const onDateChange = (e) => { const date1 = document.getElementById('ci').valueAsDate; // <-- Here const date2 = document.getElementById('co').valueAsDate; // <-- Here const diffTime = Math.abs(date2 - date1); const diffDays = Math.ceil(diffTime / DAY_IN_MILLIS); // find diffdate document.getElementById('diffday').value = diffDays; }; const triggerEvent = (el, eventName) => { var event = document.createEvent('HTMLEvents'); event.initEvent(eventName, true, false); el.dispatchEvent(event); }; main();
<input id="ci" type="date" class="datepicker" min="1"> <input id="co" type="date" class="datepicker"> <input id="diffday" type="number" min="0"> <label for="day">diffday</label>
solution2
0 2020-06-15 12:10:21
date1 and date2 return strings representing the dates. Which, if you want to calculate days difference you need to convert to unix timestamps first.
Like so:
<html>
<body>
<input id="ci" type="date" class="datepicker" min="1" >
<input id="co" type="date" class="datepicker">
<input id="diffday" type="number" min="0">
<label for="day">diffday</label>
<script>
document.getElementById('co').valueAsDate = new Date(86400000 + new Date().getTime())
document.getElementById('ci').valueAsDate = new Date();
var date1 = new Date(document.getElementById('ci').value);
var date2 = new Date(document.getElementById('co').value);
const diffTime = Math.abs(date2.getTime() - date1.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
//find diffdate
document.getElementById('diffday').value=diffDays;
</script>
</body>
</html>
What was happening was that var diffTime = "2020-06-16" - "2020-06-15" which returns NaN
Working example in this codepen
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.