如何减去两个日期并获得 HTML 的差异

Question

我正在尝试减去两个 HTML 日期类型并以天为单位提取差异。

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>

Answer 1

确保您将输入字段值作为日期而不是字符串检索。

您已经使用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>

Answer 2

date1和date2返回表示日期的字符串。 其中，如果要计算天差，则需要先转换为 unix 时间戳。

像这样：

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

发生的事情是var diffTime = "2020-06-16" - "2020-06-15"返回NaN

此代码笔中的工作示例

如何减去两个日期并获得 HTML 的差异

问题描述

2 个解决方案

解决方案1
1 2020-06-15 12:17:18

解决方案2
0 2020-06-15 12:10:21

如何减去两个日期并获得 HTML 的差异

问题描述

2 个解决方案

解决方案1 1 2020-06-15 12:17:18

解决方案2 0 2020-06-15 12:10:21

解决方案1
1 2020-06-15 12:17:18

解决方案2
0 2020-06-15 12:10:21