Отключение динамической даты в jQuery Datepicker: методы и примеры

Чтобы динамически отключить даты в jQuery Datepicker, вы можете использовать следующие методы:

  1. Использование параметра beforeShowDay. Для параметра beforeShowDayможно определить функцию, которая определяет, следует ли включать или отключать дату. С помощью этой функции вы можете программно отключить определенные даты, вернув массив со свойством enabled, имеющим значение falseдля этих дат.
$(function() {
  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      // Add your logic to disable specific dates dynamically
      var disabledDates = ["2023-12-25", "2023-12-31"]; // Example disabled dates

      var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
      if ($.inArray(formattedDate, disabledDates) != -1) {
        return [false];
      }

      return [true];
    }
  });
});
  1. Использование события beforeShow: вы можете привязать функцию к событию beforeShowDatepicker и динамически изменять свойство disabledдля определенных дат. используя метод setDate.
$(function() {
  $('#datepicker').datepicker({
    beforeShow: function(input, inst) {
      // Add your logic to disable specific dates dynamically
      var disabledDates = ["2023-12-25", "2023-12-31"]; // Example disabled dates

      for (var i = 0; i < disabledDates.length; i++) {
        inst.dpDiv.find('.ui-datepicker-calendar .ui-state-default[data-date="' + disabledDates[i] + '"]').addClass('ui-state-disabled');
      }
    }
  });
});
  1. Использование события beforeShowс методом setDate: аналогично предыдущему методу, вы можете привязать функцию к событию beforeShow, но вместо этого Чтобы изменить свойство disabled, вы можете использовать метод setDateдля отключения определенных дат.
$(function() {
  $('#datepicker').datepicker({
    beforeShow: function(input, inst) {
      // Add your logic to disable specific dates dynamically
      var disabledDates = ["2023-12-25", "2023-12-31"]; // Example disabled dates

      for (var i = 0; i < disabledDates.length; i++) {
        inst.dpDiv.find('.ui-datepicker-calendar .ui-state-default[data-date="' + disabledDates[i] + '"]').data('date', '').removeClass('ui-state-highlight');
      }
    }
  });
});