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

【问题标题】：How to subtract two dates and get the difference in HTML如何减去两个日期并获得 HTML 中的差异
【发布时间】：2020-06-15 12:03:28
【问题描述】：

我正在尝试减去两个 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>

【问题讨论】：

问题出在哪里？
@TheAlpha93 张贴者减去两个输入（字符串）值而不是日期。
您应该使用 Math.round 而不是 Math.ceil，因为日期范围越过了夏令时边界，可能会导致额外的一天。同样，new Date(86400000 + +new Date()) 有时也不会添加一整天。

标签： javascript html date

【解决方案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>

【讨论】：

【解决方案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

工作示例in this codepen

【讨论】：

但是当我从 html 输入手动更改日期时，为什么不同的日期没有改变？
您需要在所有 input 字段上都有 onChange 事件。现在它只设置了一次变量。