Сделайте дни недоступными для загрузки с помощью 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). Подробнее здесь: API jQuery UI |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">