计算两个本地日期时间输入之间的小时数答案

【问题标题】：Calculate hours between two datetime-local inputs计算两个本地日期时间输入之间的小时数
【发布时间】：2017-09-21 18:39:50
【问题描述】：

我正在尝试获取两个本地日期时间输入（开始日期和结束日期）之间的小时差。我正在尝试使用 momentjs 库来做到这一点，但没有成功。我知道问题出在本地日期时间输入的格式上，但是，有什么方法可以格式化它以允许 Momentjs 获取它并进行比较？或者我应该尝试使用不同的库/输入？

<input type="datetime-local" name="input-time" id="start-time">
<input id="end-time" type="datetime-local" onchange="myFunction()">
<input type="text" id="total-hours" placeholder="Total Hours">              

function myFunction() {
  var initialTime=document.getElementById("start-time");
  var initialTimeFormat=moment(initialTime);
  var endTime=document.getElementById("end-time");
  var endTimeFormat=moment(endTime);
  var totalHours=endTimeFormat.diff(initialTimeFormat,"hours");
  $("#total-hours").text(totalHours); 
  }

【问题讨论】：

标签： javascript jquery datetime momentjs

【解决方案1】：

我一直喜欢原版选项，因为你只使用几个小时，我们可以不用像 moment 之类的库。但是，它是一个很好的库，可用于比较日期等。

正如其他答案所说，真正的问题在于检索值：

$("input#start-time").val()); //retrieving using jQuery.

document.getElementById("start-time").value; //retrieving using vanilla. | old
document.querySelector("#start-time").value; //retrieving using vanilla. | modern

也不建议使用内联事件。使用addEventListener。

 document.querySelector("#end-time").addEventListener("change", myFunction);

function myFunction() {
  function split(time)
  {
    var t = time.split(":");
    return parseInt((t[0] * 60), 10) + parseInt(t[1], 10); //convert to minutes and add minutes
    
  }

  //value start
  var start = split($("input#start-time").val()); //format HH:MM
  
  //value end
  var end = split($("input#end-time").val()); //format HH:MM

  totalHours = NaN;
  if (start < end)
  {
    totalHours = Math.floor((end-start)/60);
  }
  
  $("#total-hours").val(totalHours); 
  
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input-time" id="start-time" placeholder="HH:MM">
<input id="end-time" type="text" placeholder="HH:MM" >
<input type="text" id="total-hours" placeholder="Total Hours">

带有日期选择器（Chrome、Firefox 和 Edge）。这里我们使用时间戳来比较。使用Date.parse 获取两个时间戳。因为datetime-local 的输入总是会给我们一个正确格式的 ISO 日期。减去时间戳会给我们以毫秒为单位的差异。一些基本的划分给我们留下了小时数。

document.querySelector("#end-time").addEventListener("change", myFunction);

function myFunction() {

  //value start
  var start = Date.parse($("input#start-time").val()); //get timestamp

  //value end
  var end = Date.parse($("input#end-time").val()); //get timestamp

  totalHours = NaN;
  if (start < end) {
    totalHours = Math.floor((end - start) / 1000 / 60 / 60); //milliseconds: /1000 / 60 / 60
  }

  $("#total-hours").val(totalHours);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="datetime-local" name="input-time" id="start-time" placeholder="HH:MM">
<input id="end-time" type="datetime-local" placeholder="HH:MM">
<input type="text" id="total-hours" placeholder="Total Hours">

【讨论】：

感谢您的解释和简单的香草解决方案:)。很有用！

【解决方案2】：

您的第一个问题是：

var initialTimeFormat=moment(initialTime);

您需要将值而不是元素传递给时刻：将 initialTime 更改为 initialTime.value

您的第二个问题是：

$("#total-hours").text(totalHours);

您需要使用 val 而不是 text。

function myFunction() {
    var initialTime=document.getElementById("start-time");
    //
    // test if the start time is not empty
    //
    if (initialTime.value.trim() == '') {
        document.getElementById("start-time").focus();
        return;
    }
    var initialTimeFormat=moment(initialTime.value);
    var endTime=document.getElementById("end-time");
    var endTimeFormat=moment(endTime.value);
    var totalHours=endTimeFormat.diff(initialTimeFormat,"hours");
    $("#total-hours").val(totalHours);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>


<input type="datetime-local" name="input-time" id="start-time">
<input id="end-time" type="datetime-local" onchange="myFunction()">
<input type="text" id="total-hours" placeholder="Total Hours">

【讨论】：

Warning: Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. 当只输入HH:MM 格式时。
Well Edges 触发更改事件（内联事件在 chrome 中被阻止），然后如果您只输入 HH:MM 格式，则会立即创建上面的警告。
@Mouser 非常感谢。我会看看。给我时间
但是关于我的警告：这发生在 IE11 上，其中不支持 datetime-local 并且您必须自己构建正确的日期字符串。
@Mouser 代码段已更新。现在它在边缘工作。对于 IE11，你是对的。此元素是新元素，并且 MS 不再支持 ie11。让我知道您是否还有其他观点。无论如何，非常感谢。

【解决方案3】：

您以错误的方式从日期输入中获取了值。我还添加了一些验证。查看这个工作示例。

function myFunction() {

  var initialTime = $("#start-time").val();
  if (initialTime == "") {
    alert("Please add Start Time (HH : MM : SS)");
    return;
  }
  var initialTimeFormat = moment(initialTime);


  var endTime = $("#end-time").val();
  if (endTime == "") {
    alert("Please add End Time (HH : MM : SS)");
    return;
  }
  var endTimeFormat = moment(endTime);
  
  var difference = endTimeFormat.diff(initialTimeFormat,"hours"); 
  console.log("Time Difference: ", difference, " hours");  
  $("#total-hours").val(difference);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

<input type="datetime-local" name="input-time" id="start-time">
<input id="end-time" type="datetime-local">
<button onclick="myFunction()">Calculate Time</button><br/><br/>
<input type="text" id="total-hours" placeholder="Total Hours">

【讨论】：

【解决方案4】：

实际上你比较两个输入而不是值。答案如下：

<input type="datetime-local" name="input-time" id="start-time">
<input id="end-time" type="datetime-local" onchange="myFunction()">
<input type="text" id="total-hours" placeholder="Total Hours">              

function myFunction() {
    var initialTime = document.getElementById("start-time").value;
    var initialTimeFormat = moment(initialTime);
    var endTime = document.getElementById("end-time").value;
    var endTimeFormat = moment(endTime);
    var totalHours = endTimeFormat.diff(initialTimeFormat,"hours");

    document.getElementById("total-hours").innerHTML = totalHours; 
 }

【讨论】：

【解决方案5】：

试试这个：

function myFunction(){
    startTime = Date.parse(document.querySelector("#start-time").value);
    endTime =  Date.parse(document.querySelector("#end-time").value);
    output = document.querySelector("#total-hours");
    output.value = (((Math.abs( startTime - endTime ) / 1000)/60)/60) + "hs";
}

这会将开始和结束时间转换为毫秒，计算间隔，然后将其转换为小时。

【讨论】：

【解决方案6】：

使用这个 HTML...

<input type="datetime-local" name="start-time" id="start-time">
<input type="datetime-local" name="end-time" id="end-time">
<input type="text" id="total-hours" placeholder="Total Hours">

...你可以用这个来计算差异...

$("input#end-time").change(function() {
    var startDate = moment($("input#start-time").val());
    var endDate = moment($(this).val());
    $("input#total-hours").val(endDate.diff(startDate,'hours'));
});

这仅在您更改结束日期（如您的示例中）且未经验证时触发计算。您应该检查输入是否有内容等。

希望对你有帮助

【讨论】：

Startdate 现在使用结束时间选择器，应该是开始时间。