Question

我有两个日期输入项，可让用户选择要搜索的日期范围。但是，我需要限制日期范围不能超过7天。例如，如果用户从12/9/2018选择日期，则日期to不应超过19/9/2018。我怎么能做到呢？谢谢。

我的代码：

<div class="container">
<div class="col-sm-12">
    <h1><span class="label label-danger">Report</span></h1><br><br>
      <div class="pull-right">
        <form class="form-inline" role="search" method = "post">
            <div class="form-group">
              <span class="label label-primary">Search and Sort</span>&nbsp; &nbsp;             
              <span class="label label-info">Date</span>&nbsp; &nbsp;
              <input type="date" class="form-control" placeholder="Order Date From" name = "searchDateFrom" >
              <input type="date" class="form-control" placeholder="Order Date To" name = "searchDateTo" >                    
            </div>
          <button class="btn btn-default " type="submit" name="submit" value = "search"><i class="glyphicon glyphicon-search"></i>
        </form>
      </div>
</div>

它可以提示您告诉用户在日期之间进行选择，也可以阻止日期单击。请帮助，谢谢。

Answer 1

此处使用的是纯JavaScript，没有jQuery或任何其他外部依赖项。请注意，我已将ID添加到输入中。另外，您可以进一步缩短代码，我将其照原样向您显示该过程。

document.querySelector('#searchDateFrom').onchange = function(){
  let dtFrom = document.querySelector('#searchDateFrom').value;
  let dtTo = new Date(dtFrom);
  dtTo.setDate(dtTo.getDate() + 7);
  let sMonthTo = ((dtTo.getMonth() + 1) < 10 ? '0' + (dtTo.getMonth() + 1) : (dtTo.getMonth() + 1));
  let sDayTo = (dtTo.getDate() < 10 ? '0' + dtTo.getDate() : dtTo.getDate());
  document.querySelector('#searchDateTo').setAttribute('max', dtTo.getFullYear() + '-' + sMonthTo + '-' + sDayTo);
};

<form class="form-inline" role="search" method = "post">
    <div class="form-group">
      <span class="label label-primary">Search and Sort</span>&nbsp; &nbsp;             
      <span class="label label-info">Date</span>&nbsp; &nbsp;
      <input type="date" class="form-control" placeholder="Order Date From" name = "searchDateFrom" id="searchDateFrom">
      <input type="date" class="form-control" placeholder="Order Date To" name = "searchDateTo" id="searchDateTo">                    
    </div>
  <button class="btn btn-default " type="submit" name="submit" value = "search"><i class="glyphicon glyphicon-search"></i>
</form>

Answer 2

HTML：

<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>Follow Date:
<input id="follow_Date" type="text" />
</p>

Add this jquery code

<script>
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
});

function getdate() {
var tt = document.getElementById('txtDate').value;

var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() + 3);

var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();

var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
}
</script>

HTML-如何限制选择日期输入的天数？

2 个答案: