Question

我想知道是否有一种简单的方法来计算事件持续多长时间的两个简单的HTML日期输入。

我们说我有这种形式：

<form>
    <input type="date" id ="select5">  
    <input type="date" id="select5">
</form> `

我在javascript函数中使用哪些变量来表示事件持续10天，或根据用户输入20天。我希望我不太清楚。非常感谢你的帮助，安德烈！

Answer 1

使用momentjs计算输入的两个日期之间的持续时间。

此示例使用asDays()生成天数差异。您可以将此方法替换为momentjs docs中的众多方法之一，例如asHours()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
  <form>
    <input type="date" id="start" onchange="getEventTime()">
    <input type="date" id="end" onchange="getEventTime()">
  </form>
  <script>
     var getEventTime = function(){
       var start = moment(document.getElementById("start").value);
       var end = moment(document.getElementById("end").value);
       console.log(moment.duration(end.diff(start)).asDays());
     }
  </script>
</body>
</html>

Answer 2

要做到这一点，你必须：

确定主机是否支持输入类型日期。如果没有，您必须重构输入以显示预期为屏幕提示的日期格式
即使支持输入类型日期，浏览器也会允许输入无效值（例如Chrome允许2月31日），因此您必须验证该值。

用户提供后，将验证值并创建日期对象：

从另一个
除以一天内的毫秒数
对结果进行舍入以适应夏令时边界的更改

使用合适的标记进行统计，然后添加脚本。希望评论是充分的，如果没有，请要求澄清。

＆＃13;

// Set parameter for support of input type date
var supportsTypeDate = (function(){
  var el = document.createElement('input');
  el.setAttribute('type', 'date');
  el.value = '2016-31-01';  // Invalid date value
  return el.type == 'date' && el.value != '2016-31-01';
}());

window.onload = function() {
  // If date is supported, remove screen tip
  if (supportsTypeDate) {
    Array.prototype.forEach.call(document.querySelectorAll('.dateScreenTip'), function(el) {
	  el.style.display = 'none';
	})
  }
}

// Parse and validate date in format dd/mm/yyyy
function parseDMY(s) {
  var b = s.split(/\D/);
  var d = new Date(b[2], --b[1], b[0]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Parse and validate a date in format yyyy-mm-dd
// Note that a date without a timezone is treated as LOCAL since
// the HTML spec is consistent with ISO 8601
function parseISODate(s){
  var b = s.split(/\D/);
  var d = new Date(b[0], --b[1], b[2]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

function calcDays() {

  // Get values
  var startDate = document.getElementById('startDate').value;
  var endDate = document.getElementById('endDate').value;
  
  // Parse to Date objects depending on whether
  // input type Date is supported
  if (supportsTypeDate) {
    startDate = parseISODate(startDate);
    endDate = parseISODate(endDate);
  } else {
    startDate = parseDMY(startDate);
    endDate = parseDMY(endDate);
  }

  // Display error messages if invalid input
  document.getElementById('startDateErr').innerHTML = +startDate? '' : 'Please insert a valid start date';
  document.getElementById('endDateErr').innerHTML = +endDate? '' : 'Please insert a valid end date';
  
  // Get difference in days. If either date is invalid, show empty result
  // Use Math.round to remove any daylight saving changeover effects
  var daysDiff = '';
  if (+startDate && +endDate) {
    daysDiff = Math.round((endDate - startDate)/8.64e7);
  }
  document.getElementById('daysDiff').value = daysDiff;
}

＆＃13;

<form>
  <br>
  <label for="startDate">Start date<input type="date" class="dateInput" id="startDate"></label>
  <span class="dateScreenTip">dd/mm/yyy</span><span class="errMsg" id="startDateErr"></span>
  <br>
  <label for="endDate">End date<input type="date" class="dateInput" id="endDate"></label>
  <span class="dateScreenTip">dd/mm/yyy</span><span class="errMsg" id="endDateErr"></span>
  <br>
  <label for="daysDiff">Days difference<input readonly id="daysDiff" name="daysDiff">
  <br>
  <input type="button" onclick="calcDays()" value="Calculate days difference">
  <input type="reset">
</form>

＆＃13;

以上内容只是为了说明所涉及的内容，将更多工作作为生产质量代码来实施。

可以通过要求用户为手动输入的日期输入yyyy-mm-dd格式来简化它，但是使用更熟悉的d / m / y可能更加用户友好。

HTML输入类型=日期Javascript函数

2 个答案: