Отключите выходные и определенные даты jQueryUI datepicker

#javascript #jquery #jquery-ui-datepicker

#язык JavaScript #jquery #jquery-пользовательский интерфейс-выбор даты

Вопрос:

Я хочу отключить выходные в окне выбора дат, а также конкретные даты, которые будут в массиве. Я заметил, что не могу объединить эти 2 параметра beforeShowDay , так как он принимает только 1 функцию. Есть ли способ, которым я могу добавить 2 функции beforeShowDay ?

 $(function() {  var unavailableDates = ["27-12-2021", "28-12-2021", "29-12-2021", "30-12-2021", "31-12-2021", "01-01-2022", "02-01-2022", "03-01-2022", "04-01-2022"];   function unavailable(date) {  dmy = date.getDate()   "-"   (date.getMonth()   1)   "-"   date.getFullYear();  if ($.inArray(dmy, unavailableDates) == -1) {  return [true, ""];  } else {  return [false, "", "Unavailable"];  }  }   $("#datepicker").datepicker({  dateFormat: "dd-mm-yy",  changeMonth: false,  changeYear: false,  minDate: '10D',  beforeShowDay: $.datepicker.noWeekends, unavailable // throws an error becaus ei have 2 options  }); });

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /gt; lt;input type="text" id="datepicker" /gt;

1. Обратите внимание, что если это вызывает ошибку, я бы предложил вам обновить свой браузер. Хотя код не будет работать, используемый вами синтаксис допустим в ES6, который поддерживается во всех современных браузерах. Я бы предположил, что вы используете IE?

Ответ №1:

Проблема в том, что beforeShowDay свойство принимает только одну функцию.

Чтобы сделать то, что вам нужно, вы можете создать анонимную функцию, в которой вы вызываете обе noWeekends() свои unavailable() функции и объединяете результат, как это:

 jQuery($ =gt; {  let unavailableDates = ["27-12-2021", "28-12-2021", "29-12-2021", "30-12-2021", "31-12-2021", "01-01-2022", "02-01-2022", "03-01-2022", "04-01-2022"];  let isUnavailable = date =gt; $.inArray(`${date.getDate()}-${(date.getMonth()   1)}-${date.getFullYear()}`, unavailableDates) gt;= 0;   $("#datepicker").datepicker({  dateFormat: "dd-mm-yy",  changeMonth: false,  changeYear: false,  minDate: '10D',  beforeShowDay: date =gt; {  if (isUnavailable(date) || !$.datepicker.noWeekends(date)[0]) {  return [false, "", "Unavailable"];  } else {  return [true, ""];  }  }  }); });

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /gt; lt;input type="text" id="datepicker" /gt;