HTML输入类型=日期Javascript函数

Question

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

假设我有这种形式：

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

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

Answer 1

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

此示例使用asDays()天数差异。 您可以将此方法替换为moment.js文档中的许多方法之一，例如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日输入），因此您必须验证该值。

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

从另一个减去一个日期
除以一天中的毫秒数
将结果取整以适应夏令时的变化

使用适当的标记统计，然后添加脚本。 希望评论是足够的，如果不够，请要求澄清。

 // 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; }

 <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>

以上内容只是对所涉及内容的演示，还有很多工作要实现为生产质量代码。

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

HTML输入类型=日期Javascript函数

问题描述

2 个解决方案

解决方案1
0 2016-02-14 22:57:37

解决方案2
0 已采纳 2016-02-15 00:31:08

HTML输入类型=日期Javascript函数

问题描述

2 个解决方案

解决方案1 0 2016-02-14 22:57:37

解决方案2 0 已采纳 2016-02-15 00:31:08

解决方案1
0 2016-02-14 22:57:37

解决方案2
0 已采纳 2016-02-15 00:31:08