引导日期选择器 maxdate 不起作用答案

【问题标题】：Bootstrap datepicker maxdate not working引导日期选择器 maxdate 不起作用
【发布时间】：2018-07-01 20:19:54
【问题描述】：

jQuery:

$("#min").datepicker({maxDate: 0, changeMonth: true, changeYear: true });
$("#max").datepicker({maxDate: 0, changeMonth: true, changeYear: true });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" class="form-control" name="from" id="min">
<span class="input-group-addon"> to </span>
<input type="text" class="form-control" name="to" id="max">

谁能告诉我为什么这不起作用，我该如何解决？

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

在下面的示例中，我已将 maxDate:0 更改为 startDate:01/10/2018 和 endDate:02/10/2018，因此您的最大日期将是 feb 10 2018

$("#min").datepicker({ startDate: "01/10/2018",
endDate: "02/10/2018", changeMonth: true, changeYear: true });
$("#max").datepicker({ startDate: "01/10/2018",
endDate: "02/10/2018", changeMonth: true, changeYear: true });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" class="form-control" name="from" id="min">
<span class="input-group-addon"> to </span>
<input type="text" class="form-control" name="to" id="max">

【讨论】：

【解决方案2】：

试试这个 sn-p。还添加了验证。

function populateEndDate() {
  var date2 = $('#max').datepicker('getDate');
  date2.setDate(date2.getDate() + 1);
  $('#max').datepicker('setDate', date2);
  $("#max").datepicker("option", "minDate", date2);
}

$(document).ready(function() {

  $("#min").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 'dateToday',
    onSelect: function(date) {
      populateEndDate();
    }
  }).datepicker("setDate", new Date());
  $('#max').datepicker({
    dateFormat: "dd-M-yy",
    minDate: 1,
    onClose: function() {
      var dt1 = $('#min').datepicker('getDate');
      var dt2 = $('#max').datepicker('getDate');
      if (dt2 <= dt1) {
        var minDate = $('#max').datepicker('option', 'minDate');
        $('#max').datepicker('setDate', minDate);
      }
    }
  }).datepicker("setDate", new Date());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />

<label for="">start</label>
<input type="text" class="form-control" id="min" name="start">
<label for="">end</label>
<input type="text" class="form-control" id="max" name="end">

【讨论】：