Вам потребуется использовать опцию onRenderCell
в плагине Air Datepicker, чтобы динамически выделять даты, которые имеются.
Вызовите функцию onRenderCell
во время инициализации плагина Air Datepicker и передайте ей колбэк функцию, которая будет вызываться для каждой ячейки (даты) в виджете. Внутри колбэк функции вы сможете проверять, имеется ли дата в вашем списке и применять необходимый стиль к соответствующим ячейкам.
Вот пример кода, который показывает, как это можно сделать:
// Создайте массив для хранения доступных дат var availableDates = ['2021-01-01', '2021-01-10', '2021-01-15']; // Инициализируйте плагин Air Datepicker $('#datepicker').datepicker({ // Передайте функцию onRenderCell в опцию onRenderCell onRenderCell: function (date, cellType) { // Проверяем, является ли ячейка типом "день" if (cellType === 'day') { var formattedDate = $.datepicker.formatDate('yy-mm-dd', date); // Проверяем, есть ли текущая дата в нашем массиве доступных дат if ($.inArray(formattedDate, availableDates) !== -1) { // Если дата доступна, применяем соответствующий класс CSS return { classes: 'available-date' }; } } } });
Здесь мы создаем массив availableDates
, который содержит список доступных дат. Затем мы передаем функцию onRenderCell
в опцию onRenderCell
плагина Air Datepicker. Внутри этой функции мы проверяем, является ли текущая ячейка типом "день" и сравниваем дату с нашим списком доступных дат. Если текущая дата присутствует в массиве availableDates
, мы возвращаем объект с CSS-классом available-date
, чтобы применить стиль к соответствующей ячейке.
Вы можете настроить класс CSS available-date
в своем файле CSS таким образом, чтобы ячейки с доступными датами выделялись или отображались по-разному.
Надеюсь, это помогло вам понять, как выделить даты, которые имеются с помощью Air Datepicker!