Datepicker отключает предыдущие и будущие даты неправильно

1

Я создал datepicker для своей формы и выбирает текущую дату и отключает прошлые даты.

   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);
  }
});
});
<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">

Но проблема в том, что, когда я выбираю дату "от", а затем дату "до", моя "до" дата блокирует мою "от" дату. Так, например, если я выберу "от" 10 июля "до" 15 июля, то после 15 июля я не могу изменить дату с даты. Он блокирует мои будущие даты после выбранной даты "до".

Как если бы я выбрал дату "до", она делает maxDate до тех пор, пока я не перезагружу страницу.

Как я могу предотвратить этот maxDate, чтобы всегда выбирать дату, которую я хочу? Единственное ограничение, в котором я нуждаюсь, - отключить прошлые даты с сегодняшнего дня.

Теги:
forms
datepicker

2 ответа

2
Лучший ответ

Попробуйте этот код

Удалены настройки кода maxDate для from DatePicker

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">
Поделиться
  • 0
    Идеальное решение !!! Теперь отлично работает с этой модификацией, спасибо! :)
  • 0
    Рад помочь вам :) Счастливого кодирования -:) - :)
0

Предполагая, что вы говорите о jquery 2.1.1 и jquery-ui 1.12.1, как описано в документации, вы должны рассмотреть метод destroy, чтобы переработать параметры minDate и maxDate, но это было бы сложно. Поэтому я бы рассмотрел использование таймера datepicker в этом случае, чтобы получить желаемый результат.

   $(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;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<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">
Поделиться
  • 0
    Это прекрасно работает, но обратите внимание, что в тот момент, когда вы выбираете дату «до», тогда дата «от» ограничена, и я не могу выбрать будущую дату выше «до», которую я выбрал. В тот момент, когда я выбираю дату во второй форме, она ограничивает первую форму maxDate.
  • 0
    потому что так работает временной диапазон: от -> до. Итак, вы хотели бы иметь возможность участвовать «от» до «до»?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню