Question

我已为表单创建了一个日期选择器，它会选择当前日期并禁用过去的日期。

＆＃13;

   jQuery(document).ready(function($){

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
  defaultDate: "+1w",
  changeMonth: false,
  numberOfMonths: 1,
  minDate: dateToday,
  onSelect: function(selectedDate) {
      var option = this.id == "from" ? "minDate" : "maxDate",
          instance = $(this).data("datepicker"),
          date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
      dates.not(this).datepicker("option", option, date);
  }
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">

<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">

＆＃13;

但问题是当我选择＆＃34;来自＆＃34;日期，然后是＆＃34;到＆＃34;约会，我的＆＃34;到＆＃34;日期阻止我＆＃34;来自＆＃34;日期。例如，如果我选择＆＃34;来自＆＃34; 7月10日＆＃34;到＆＃34; 7月15日，我不能再在7月15日之后改变我的日期。它阻止了我在＆＃34;到＆＃34;之后的未来日期。选择日期。

如果我选择＆＃34;到＆＃34;在重新加载页面之前，它会使它成为maxDate。

如何阻止此maxDate，以便始终可以选择我想要的日期？我需要的唯一限制是禁用从今天开始的过去日期。

Answer 1

试用此代码

删除了maxDate datepicker

的代码设置from

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
  defaultDate: "+1w",
  changeMonth: false,
  numberOfMonths: 1,
  minDate: dateToday,
  onSelect: function(selectedDate) {
      var option = this.id == "from" ? "minDate" : null,
      instance = $(this).data("datepicker"),
      date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
     if(option!==null){
         dates.not(this).datepicker("option", option, date);
      }
  }
});

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
  defaultDate: "+1w",
  changeMonth: false,
  numberOfMonths: 1,
  minDate: dateToday,
  onSelect: function(selectedDate) {
      var option = this.id == "from" ? "minDate" : null,
      instance = $(this).data("datepicker"),
      date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
      if(option!==null){
      dates.not(this).datepicker("option", option, date);
      }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">

<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">

Answer 2

假设您正在讨论documentation中描述的jquery 2.1.1和jquery-ui 1.12.1，您应该考虑destroy method重新阐述minDate和{{1选项 - 但这将是棘手的。所以我会考虑在这种情况下使用timerange datepicker来获得所需的结果。

maxDate

   $(function () {
var dateToday = new Date();
var dateFormat = "mm/dd/yy",
    from = $("#from")
        .datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 1,
            minDate: dateToday
        })
        .on("change", function () {
            to.datepicker("option", "minDate", getDate(this));
        }),
    to = $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
    })
        .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;
}
});

Datepicker禁用错误的上一个和未来日期

2 个答案: