使用 jQuery Datepicker 使日期在加载时无法选择

Question

我有两个日期：最小值和最大值，如链接图片中所示。如何设置以便在页面加载时，在呈现页面时为“最大日期”字段设置最小日期？这样日子就变得无法选择了。我试过“onload”这样的：

onLoad: function (selectedDate) {
    if (this.id == 'datetimepickerFrom') {
        var dateMin = $('#datetimepickerFrom').datepicker("getDate");
        var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
        $('#datetimepickerTo').datepicker("option", "minDate", rMin);
    }
}

页面加载时，日期仍然可以选择。只有当用户单击“最小日期”输入字段时，“最大日期”字段中的天数才会变为不可选择。

使用： jQuery UI 默认小部件

Answer 1

如果您的数据库或其他地方已经有 Min 和 Max 的日期字符串，您可以使用 $.datepicker.parseDate(dateFormat, dateString) 简单地设置日期。在这里查看更多：jQuery UI API | DatePicker

var selectedDates = {
  min: "10/04/2019",
  max: "10/18/2019"
};

$(function() {
  var dateFormat = "mm/dd/yy",
    from = $("#from")
    .datepicker({
      changeMonth: true,
      minDate: $.datepicker.parseDate(dateFormat, selectedDates.min),
      maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max)
    })
    .on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#to").datepicker({
      changeMonth: true,
      minDate: $.datepicker.parseDate(dateFormat, selectedDates.min),
      maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max)
    })
    .on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }
    return date;
  }

  from.datepicker("setDate", selectedDates.min);
  to.datepicker("setDate", selectedDates.max);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

Answer 2

或许能帮到你：

$(function () {
  var date = new Date();
  date.setDate(date.getDate());
  var startDate, endDate = date;

  $('.from_date').datepicker({
    format: 'dd MM yyyy',
    endDate: date,
    startDate: '18 May 2019',
    autoclose: true
  }).on('changeDate', function (selected) {
    startDate = new Date(selected.date.valueOf());
    console.log(startDate);
    $('.to_date').datepicker('setStartDate', startDate);
    if (startDate > endDate) {
      $('.to_date').datepicker('setDate', startDate);
    }
  });
  $('.to_date').datepicker({
    format: 'dd MM yyyy',
    endDate: date,
    startDate: '8 Oct 2016',
    autoclose: true
  }).on('changeDate', function (selected) {
    endDate = new Date(selected.date.valueOf());
    console.log(endDate);
  });
})

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"/>


<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>


<input type="text" style="margin-top: 20px !important;" class="from_date" placeholder="Select start date" contenteditable="false">

<input type="text" style="margin-top: 20px !important;" class="to_date" placeholder="Select start date" contenteditable="false">