Question

我有两个不同的日期输入与HTML5日历其中一个开始日期，第二个是结束日期我只需要计算用户使用javascript选择开始日期和结束日期的日子，并使用if条件，例如，如果这些天大于10，则隐藏一些元素

var date1 = new Date($('#start').val());
var date2 = new Date($('#end').val());
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
alert(diffDays);

start
<br />
<input id="start" type="date" data-date-inline-picker="true" />
<br />
end
<br />
<input id="end" type="date" data-date-inline-picker="true" />
<br />
<div id="demo">the days here</div>

Answer 1

在这里。我将事件绑定到#endDate。

LInk to check - ＆gt; https://jsfiddle.net/nmitic/rvpb3dfg/

<input id="start" type="date" data-date-inline-picker="true" />
<input id="end" type="date" data-date-inline-picker="true" />

  function getDifFDate(startDate, endDate) {
  var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
  var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  return diffDays;
}

$('#end').on('change', function() {
  var date1 = new Date($('#start').val());
  var date2 = new Date($('#end').val());    

    if(getDifFDate(date1, date2) > 10) {
        console.log('do something here');
      }
});

注意您应该实现某种类型的验证，如果只选择了一个输入日期，则不应触发该事件。

Answer 2

请查看以下代码，如果差异大于10天，则隐藏天数，否则将显示。

＆＃13;

function showdiff()
{
var date1 = new Date(document.getElementById("start").value);
var date2 = new Date(document.getElementById("end").value);
var timeDiff = (date2 - date1) / (24 * 3600 * 1000);
document.getElementById('demo').innerHTML = timeDiff;
if(timeDiff > 10)
{
 document.getElementById('demo').style.display = 'none';
}
alert(timeDiff);

}

＆＃13;

start
<br />
<input id="start" type="date" data-date-inline-picker="true" />
<br />
end
<br />
<input id="end" type="date" data-date-inline-picker="true" />
<br />
<div id="demo">the days here</div>
<button onclick="showdiff()">Difference</button>

＆＃13;

从拖曳日期输入值计算天数

2 个答案: