javascript - 使用 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

如果您的数据库或其他地方已经有最小值和最大值的日期字符串，您可以使用 $.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">