如何减去两个日期并获得 HTML 的差异
[英]How to subtract two dates and get the difference in HTML
问题描述
I'm trying to subtract two HTML date types and extract the difference, in days.
我正在尝试减去两个 HTML 日期类型并以天为单位提取差异。
ci and co stand for check in and check out ci和co代表签入和签出
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 个解决方案
解决方案1
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.您已经使用valueAsDate设置了该值，因此请再次使用它进行检索。
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>
解决方案2
0 2020-06-15 12:10:21
date1 and date2 return strings representing the dates. date1和date2返回表示日期的字符串。 Which, if you want to calculate days difference you need to convert to unix timestamps first.其中，如果要计算天差，则需要先转换为 unix 时间戳。
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发生的事情是var diffTime = "2020-06-16" - "2020-06-15"返回NaN
Working example in this codepen此代码笔中的工作示例
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.