检测 <input type=“time”> 何时有值

Question

我的目标是使用两个时间输入的值来计算它们之间的总时间。为了实现这一点，我需要确保时间输入中的值是有效的。

我希望以下代码的结果仅在输入具有值时执行警报。实际结果是立即发出警报。

let startTimeInput = document.getElementById("startTimeInput");
if (startTimeInput.value !== null) {
  alert("My input has a value!");
}

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

Answer 1

默认值是'' 而不是null，所以像这样检查：if (startTimeInput.value !== '') ...

let startTimeInput = document.getElementById("startTimeInput");
console.log(startTimeInput.value !== null);
console.log(startTimeInput.value !== '');

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

Answer 2

function startTimeInput(e){
    var mindate = e.target.value;
    alert(mindate);
}

function endTimeInput(e){
    var mindate = e.target.value;
    alert(mindate);
}

<input type="time" id="startTimeInput" onchange="startTimeInput(event);" name="startTimeInput">
<input type="time" id="endTimeInput" onchange="endTimeInput(event);" name="endTimeInput">

您可以使用onchange 尝试类似的操作。

Answer 3

如何调试这样的东西

您不应检查 only 是否为空。如果对 null 的检查有效，它就会有效，因此我们可以怀疑默认值不是 null。

另一方面，（感谢@MauriceNino 在 cmets 中指出），根据https://stackoverflow.com/a/17240499/1688441，文本输入不应具有任何类型的空值。就个人而言，我在所有代码中都添加了这些检查，以确保您在某些时候可能会使用其他类型的对象，这些对象可能确实是（或返回）null。

在这种情况下，使用断点进行调试或使用console.log 在控制台中获取值非常方便。

执行console.log 以查看当前值（可能类似于 0 或自 1970 年以来以毫秒为单位的值）。

实际实验

我尝试了特定的console.log 并看到了一个空字符串。

为了确保它是一个字符串，您还可以像这样使用typeof 函数：

console.log("TYPE:");
console.log(typeof  document.getElementById("startTimeInput").value);

结果是：

TYPE:
string

因此我继续执行以下操作，发现该值是一个大小为零的空字符串。

console.log(startTimeInput.value.length);
0

因此，您应该检查大小为零的字符串。

如何查看时间的解决方案

let startTimeInput = document.getElementById("startTimeInput");
if (startTimeInput.value !== null &&  startTimeInput.value.length>0) {
  alert('There is a value');
}

<input type="time" id="startTimeInput" onchange="startTimeInput(event);" name="startTimeInput">
<input type="time" id="endTimeInput" onchange="endTimeInput(event);" name="endTimeInput">

计算时间之间的小时数

以下是有关如何将所有内容放在一起并计算两个日期之间的小时数的示例。我只使用了 JS，虽然使用日期库可能更方便。

console.log("TYPE:");
console.log(typeof  document.getElementById("startTimeInput").value);

function calculateTimeBetween(){
    
let startTimeInput = document.getElementById("startTimeInput").value;
let endTimeInput = document.getElementById("endTimeInput").value;

if (timeHasNotValue(startTimeInput) || timeHasNotValue(endTimeInput)){
    alert("One of the dates has not been set");
  return;
}

console.log("TIMES:");
let startDate = (parseTime(startTimeInput));
let endDate = (parseTime(endTimeInput));

var diffHours = (endDate - startDate)/(1000*60*60); 
  

//From: https://stackoverflow.com/a/35463482/1688441
let n = new Date(0,0);
n.setSeconds(+diffHours * 60 * 60);
alert('Difference is ' + n.toTimeString().slice(0, 5) );

}

 function timeHasNotValue(timeInput){
  return (timeInput === null || timeInput.length==0);
}

function parseTime(timeString)
{
  if (timeString == '') return null;
  var d = new Date();
  var time = timeString.match(/(\d+)(:(\d\d))?\s*(p?)/i);
  d.setHours( parseInt(time[1],10) + ( ( parseInt(time[1],10) < 12 && time[4] ) ? 12 : 0) );
  d.setMinutes( parseInt(time[3],10) || 0 );
  d.setSeconds(0, 0);
  return d;
}
//From: https://stackoverflow.com/a/338439/1688441

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

<button onclick="calculateTimeBetween()">Calculate</button>