Make days unselectable on load with jQuery Datepicker

Question

I have two dates: a Min and a Max, like seen on the linked picture. How do I set so that when the page loads, that the minimum date is set for the "Max date" field when rendering the page? So that the days become unselectable. I've tried "onload" like:

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

The days still remain selectable when the page loads. The days only become unselectable on the "Max date" field when a user clicks in the "Min date" input field.

Using: jQuery UI default widget

Link to example image

user_463319 · Answer

If you already have date Strings for Min and Max in your DB or somewhere, you can simple set the dates using $.datepicker.parseDate(dateFormat, dateString). See More here: 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);
});






From

to

user_5052705 · Answer

It may could help you:

$(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);
  });
})

Make days unselectable on load with jQuery Datepicker

2 Answers