时间戳

首页 > 解决方案 > 如何使用javascript自动计算2个日期和2个时间的持续时间？

javascript - 如何使用javascript自动计算2个日期和2个时间的持续时间？

问题描述

我正在尝试以小时为单位计算 2 个日期和 2 次之间的时差。用户将能够选择从日期、到日期、从时间和到时间。我现在面临的问题是当我选择了两个日期和时间时，持续时间显示 NaN。我已经尝试通过为 和持续时间分配一个日期来var timeStart = new Date("01/01/2007 "+ start); var timeEnd = new Date("01/01/2007 " + end);计算并显示在持续时间中，但这不是我想要的。我希望实施的系统是让用户选择时间和日期，系统将以小时为单位显示持续时间。

$(document).ready(function() {

  $('#FromTime').change(function() {
    var startDate = document.getElementById('FromDate').value;
    var endDate = document.getElementById('ToDate').value;
    var start = document.getElementById('FromTime').value;
    var end = document.getElementById('ToTime').value;
    var timeStart = new Date(startDate + start);
    var timeEnd = new Date(endDate + end);
    var difference = timeEnd.getTime() - timeStart.getTime(); // This will give difference in milliseconds
    var resultInMinutes = (difference / 60000) / 60;
    var x = Math.floor(resultInMinutes);
    // var x = (Math.floor(resultInMinutes * 100) / 100).toFixed(0);
    document.getElementById('duration').value = x;


  });

  $('#ToTime').change(function() {

    var startDate = document.getElementById('FromDate').value;
    var endDate = document.getElementById('ToDate').value;
    var start = document.getElementById('FromTime').value;
    var end = document.getElementById('ToTime').value;
    var timeStart = new Date(startDate + start);
    var timeEnd = new Date(endDate + end);
    var difference = timeEnd.getTime() - timeStart.getTime(); // This will give difference in milliseconds
    var resultInMinutes = (difference / 60000) / 60;
    var x = Math.floor(resultInMinutes);
    // var x = (Math.floor(resultInMinutes * 100) / 100).toFixed(0);
    document.getElementById('duration').value = x;


  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="input-field  col m6 s12">
  <label for="FromDate">From Date : </label></br>
  </br>
  <input type="date" name="FromDate" id="FromDate" autocomplete="off" required>
</div>
<div class="input-field  col m6 s12">
  <label for="ToDate">To Date : </label></br>
  </br>
  <input type="date" name="ToDate" id="ToDate" autocomplete="off" required>
</div>
<div class="input-field col m6 s12">
  <label for="FromTime">From Time : </label></br>
  </br>
  <select id="FromTime" name="FromTime">
    <option value="00:00:00">00:00 AM</option>
    <option value="00:30:00">00:30 AM</option>
    <option value="01:00:00">01:00 AM</option>
    <option value="01:30:00">01:30 AM</option>
    <option value="02:00:00">02:00 AM</option>
    <option value="02:30:00">02:30 AM</option>
    <option value="03:00:00">03:00 AM</option>
    <option value="03:30:00">03:30 AM</option>
    <option value="04:00:00">04:00 AM</option>
    <option value="04:30:00">04:30 AM</option>
    <option value="05:00:00">05:00 AM</option>
    <option value="05:30:00">05:30 AM</option>
    <option value="06:00:00">06:00 AM</option>
    <option value="06:30:00">06:30 AM</option>
    <option value="07:00:00">07:00 AM</option>
    <option value="07:30:00">07:30 AM</option>
    <option value="08:00:00">08:00 AM</option>
    <option value="08:30:00">08:30 AM</option>
    <option value="09:00:00">09:00 AM</option>
    <option value="09:30:00">09:30 AM</option>
    <option value="10:00:00">10:00 AM</option>
    <option value="10:30:00">10:30 AM</option>
    <option value="11:00:00">11:00 AM</option>
    <option value="11:30:00">11:30 AM</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">13:00 PM</option>
    <option value="13:30:00">13:30 PM</option>
    <option value="14:00:00">14:00 PM</option>
    <option value="14:30:00">14:30 PM</option>
    <option value="15:00:00">15:00 PM</option>
    <option value="15:30:00">15:30 PM</option>
    <option value="16:00:00">16:00 PM</option>
    <option value="16:30:00">16:30 PM</option>
    <option value="17:00:00">17:00 PM</option>
    <option value="17:30:00">17:30 PM</option>
    <option value="18:00:00">18:00 PM</option>
    <option value="18:30:00">18:30 PM</option>
    <option value="19:00:00">19:00 PM</option>
    <option value="19:30:00">19:30 PM</option>
    <option value="20:00:00">20:00 PM</option>
    <option value="20:30:00">20:30 PM</option>
    <option value="21:00:00">21:00 PM</option>
    <option value="21:30:00">21:30 PM</option>
    <option value="22:00:00">22:00 PM</option>
    <option value="22:30:00">22:30 PM</option>
    <option value="23:00:00">23:00 PM</option>
    <option value="23:30:00">23:30 PM</option>
  </select>
</div>

<div class="input-field col m6 s12">
  <label for="ToTime">To Time : </label></br>
  </br>
  <select id="ToTime" name="ToTime">
    <option value="00:00:00">00:00 AM</option>
    <option value="00:30:00">00:30 AM</option>
    <option value="01:00:00">01:00 AM</option>
    <option value="01:30:00">01:30 AM</option>
    <option value="02:00:00">02:00 AM</option>
    <option value="02:30:00">02:30 AM</option>
    <option value="03:00:00">03:00 AM</option>
    <option value="03:30:00">03:30 AM</option>
    <option value="04:00:00">04:00 AM</option>
    <option value="04:30:00">04:30 AM</option>
    <option value="05:00:00">05:00 AM</option>
    <option value="05:30:00">05:30 AM</option>
    <option value="06:00:00">06:00 AM</option>
    <option value="06:30:00">06:30 AM</option>
    <option value="07:00:00">07:00 AM</option>
    <option value="07:30:00">07:30 AM</option>
    <option value="08:00:00">08:00 AM</option>
    <option value="08:30:00">08:30 AM</option>
    <option value="09:00:00">09:00 AM</option>
    <option value="09:30:00">09:30 AM</option>
    <option value="10:00:00">10:00 AM</option>
    <option value="10:30:00">10:30 AM</option>
    <option value="11:00:00">11:00 AM</option>
    <option value="11:30:00">11:30 AM</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">13:00 PM</option>
    <option value="13:30:00">13:30 PM</option>
    <option value="14:00:00">14:00 PM</option>
    <option value="14:30:00">14:30 PM</option>
    <option value="15:00:00">15:00 PM</option>
    <option value="15:30:00">15:30 PM</option>
    <option value="16:00:00">16:00 PM</option>
    <option value="16:30:00">16:30 PM</option>
    <option value="17:00:00">17:00 PM</option>
    <option value="17:30:00">17:30 PM</option>
    <option value="18:00:00">18:00 PM</option>
    <option value="18:30:00">18:30 PM</option>
    <option value="19:00:00">19:00 PM</option>
    <option value="19:30:00">19:30 PM</option>
    <option value="20:00:00">20:00 PM</option>
    <option value="20:30:00">20:30 PM</option>
    <option value="21:00:00">21:00 PM</option>
    <option value="21:30:00">21:30 PM</option>
    <option value="22:00:00">22:00 PM</option>
    <option value="22:30:00">22:30 PM</option>
    <option value="23:00:00">23:00 PM</option>
    <option value="23:30:00">23:30 PM</option>
  </select>
</div>

标签： javascripthtml

解决方案

缺少输出

日期和时间之间缺少空格

    var timeStart = new Date(`${startDate} ${start}`);
    var timeEnd = new Date(`${endDate} ${end}`);

我修复了无效的 HTML 并将 jQuery 用于所有字段

$(document).ready(function() {

  $('#FromTime').change(function() {
    var startDate = $('#FromDate').val();
    var endDate = $('#ToDate').val();
    var start = $('#FromTime').val();
    var end = $('#ToTime').val();
    var timeStart = new Date(`${startDate} ${start}`);
    var timeEnd = new Date(`${endDate} ${end}`);
    var difference = timeEnd.getTime() - timeStart.getTime(); // This will give difference in milliseconds
    var resultInMinutes = (difference / 60000) / 60;
    var x = Math.floor(resultInMinutes);
    // var x = (Math.floor(resultInMinutes * 100) / 100).toFixed(0);
    console.log(x)
    $('#duration').val(x);


  });

  $('#ToTime').change(function() {

    var startDate = $('#FromDate').val();
    var endDate = $('#ToDate').val();
    var start = $('#FromTime').val();
    var end = $('#ToTime').val();
    var timeStart = new Date(`${startDate} ${start}`);
    var timeEnd = new Date(`${endDate} ${end}`);
    var difference = timeEnd.getTime() - timeStart.getTime(); // This will give difference in milliseconds
    var resultInMinutes = (difference / 60000) / 60;
    var x = Math.floor(resultInMinutes);
    // var x = (Math.floor(resultInMinutes * 100) / 100).toFixed(0);
    $('#duration').val(x);


  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Duration <input id="duration"  readonly/>
<div class="input-field  col m6 s12">
  <label for="FromDate">From Date : </label></br>
  <br/>
  <input type="date" name="FromDate" id="FromDate" autocomplete="off" required>
</div>
<div class="input-field  col m6 s12">
  <label for="ToDate">To Date : </label></br>
  <br/>
  <input type="date" name="ToDate" id="ToDate" autocomplete="off" required>
</div>
<div class="input-field col m6 s12">
  <label for="FromTime">From Time : </label></br>
  <br/>
  <select id="FromTime" name="FromTime">
    <option value="00:00:00">00:00 AM</option>
    <option value="00:30:00">00:30 AM</option>
    <option value="01:00:00">01:00 AM</option>
    <option value="01:30:00">01:30 AM</option>
    <option value="02:00:00">02:00 AM</option>
    <option value="02:30:00">02:30 AM</option>
    <option value="03:00:00">03:00 AM</option>
    <option value="03:30:00">03:30 AM</option>
    <option value="04:00:00">04:00 AM</option>
    <option value="04:30:00">04:30 AM</option>
    <option value="05:00:00">05:00 AM</option>
    <option value="05:30:00">05:30 AM</option>
    <option value="06:00:00">06:00 AM</option>
    <option value="06:30:00">06:30 AM</option>
    <option value="07:00:00">07:00 AM</option>
    <option value="07:30:00">07:30 AM</option>
    <option value="08:00:00">08:00 AM</option>
    <option value="08:30:00">08:30 AM</option>
    <option value="09:00:00">09:00 AM</option>
    <option value="09:30:00">09:30 AM</option>
    <option value="10:00:00">10:00 AM</option>
    <option value="10:30:00">10:30 AM</option>
    <option value="11:00:00">11:00 AM</option>
    <option value="11:30:00">11:30 AM</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">13:00 PM</option>
    <option value="13:30:00">13:30 PM</option>
    <option value="14:00:00">14:00 PM</option>
    <option value="14:30:00">14:30 PM</option>
    <option value="15:00:00">15:00 PM</option>
    <option value="15:30:00">15:30 PM</option>
    <option value="16:00:00">16:00 PM</option>
    <option value="16:30:00">16:30 PM</option>
    <option value="17:00:00">17:00 PM</option>
    <option value="17:30:00">17:30 PM</option>
    <option value="18:00:00">18:00 PM</option>
    <option value="18:30:00">18:30 PM</option>
    <option value="19:00:00">19:00 PM</option>
    <option value="19:30:00">19:30 PM</option>
    <option value="20:00:00">20:00 PM</option>
    <option value="20:30:00">20:30 PM</option>
    <option value="21:00:00">21:00 PM</option>
    <option value="21:30:00">21:30 PM</option>
    <option value="22:00:00">22:00 PM</option>
    <option value="22:30:00">22:30 PM</option>
    <option value="23:00:00">23:00 PM</option>
    <option value="23:30:00">23:30 PM</option>
  </select>
</div>

<div class="input-field col m6 s12">
  <label for="ToTime">To Time : </label></br>
  <br/>
  <select id="ToTime" name="ToTime">
    <option value="00:00:00">00:00 AM</option>
    <option value="00:30:00">00:30 AM</option>
    <option value="01:00:00">01:00 AM</option>
    <option value="01:30:00">01:30 AM</option>
    <option value="02:00:00">02:00 AM</option>
    <option value="02:30:00">02:30 AM</option>
    <option value="03:00:00">03:00 AM</option>
    <option value="03:30:00">03:30 AM</option>
    <option value="04:00:00">04:00 AM</option>
    <option value="04:30:00">04:30 AM</option>
    <option value="05:00:00">05:00 AM</option>
    <option value="05:30:00">05:30 AM</option>
    <option value="06:00:00">06:00 AM</option>
    <option value="06:30:00">06:30 AM</option>
    <option value="07:00:00">07:00 AM</option>
    <option value="07:30:00">07:30 AM</option>
    <option value="08:00:00">08:00 AM</option>
    <option value="08:30:00">08:30 AM</option>
    <option value="09:00:00">09:00 AM</option>
    <option value="09:30:00">09:30 AM</option>
    <option value="10:00:00">10:00 AM</option>
    <option value="10:30:00">10:30 AM</option>
    <option value="11:00:00">11:00 AM</option>
    <option value="11:30:00">11:30 AM</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">13:00 PM</option>
    <option value="13:30:00">13:30 PM</option>
    <option value="14:00:00">14:00 PM</option>
    <option value="14:30:00">14:30 PM</option>
    <option value="15:00:00">15:00 PM</option>
    <option value="15:30:00">15:30 PM</option>
    <option value="16:00:00">16:00 PM</option>
    <option value="16:30:00">16:30 PM</option>
    <option value="17:00:00">17:00 PM</option>
    <option value="17:30:00">17:30 PM</option>
    <option value="18:00:00">18:00 PM</option>
    <option value="18:30:00">18:30 PM</option>
    <option value="19:00:00">19:00 PM</option>
    <option value="19:30:00">19:30 PM</option>
    <option value="20:00:00">20:00 PM</option>
    <option value="20:30:00">20:30 PM</option>
    <option value="21:00:00">21:00 PM</option>
    <option value="21:30:00">21:30 PM</option>
    <option value="22:00:00">22:00 PM</option>
    <option value="22:30:00">22:30 PM</option>
    <option value="23:00:00">23:00 PM</option>
    <option value="23:30:00">23:30 PM</option>
  </select>
</div>

推荐阅读