Как в air datepicker сделать что бы выделялись даты которые есть?
Всем привет!
Использую air datepicker, и возникла задача:
Сделать так, что бы выделялись в календаре даты которые есть в БД.
Подробнее:
Сайт на WP,
Для дат использую кастомные поля ACF (my_date)
Хочу что бы в календаре air_datepicker была подсветка дат таким образом:
Текущая дата - красная, жирная.
Даты которые есть в БД - зеленые, жирные.
Все остальные даты - серые.
Буду признателен за совет.
Дополнительно:
Ответы:
Я в JS переопределяю onRenderCell и внутри добавляю классы по условиям (которые потом красишь в CSS) - кусок кода у меня...arrDpres, arrDlbu, holDays - массивы с датами по которым раскрашиваю:
var i = 0; $('.datepicker-onlinezapis').datepicker({ onRenderCell: function (date, cellType) { var day = date.getDay(), isDisabled = false; var dt4 = new Date(date); dt4.setDate(dt4.getDate() + 1 ); var curcalday = dt4.toJSON().slice(0, 10); // преобразуем дату из формата DateTime в yyyy-mm-dd for (i = 0; i < arrDpres.length; i++){ if (arrDpres[i] == curcalday){ return { classes: 'datapicker-datesindb' } } } for (i = 0; i < arrDlbu.length; i++){ if (arrDlbu[i] == curcalday){ return { classes: 'datapicker-lockedbyuser' } } } for (i = 0; i < holDays.length; i++){ if (holDays[i] == dateFormat(curcalday)){ isDisabled = true; return { disabled: isDisabled } } } if (cellType == 'day') { isDisabled = disabledDays.indexOf(day) != -1; return { disabled: isDisabled } } } |
var i = 0; $('.datepicker-onlinezapis').datepicker({ onRenderCell: function (date, cellType) { var day = date.getDay(), isDisabled = false; var dt4 = new Date(date); dt4.setDate(dt4.getDate() + 1 ); var curcalday = dt4.toJSON().slice(0, 10); // преобразуем дату из формата DateTime в yyyy-mm-dd for (i = 0; i < arrDpres.length; i++){ if (arrDpres[i] == curcalday){ return { classes: 'datapicker-datesindb' } } } for (i = 0; i < arrDlbu.length; i++){ if (arrDlbu[i] == curcalday){ return { classes: 'datapicker-lockedbyuser' } } } for (i = 0; i < holDays.length; i++){ if (holDays[i] == dateFormat(curcalday)){ isDisabled = true; return { disabled: isDisabled } } } if (cellType == 'day') { isDisabled = disabledDays.indexOf(day) != -1; return { disabled: isDisabled } } }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы выделять даты в air datepicker, которые уже существуют, вам необходимо использовать опцию beforeShowDay. Эта опция позволяет определить, какие даты нужно выделить, добавив им определенный класс.
Пример кода на JavaScript с использованием jQuery:
$(function() { var existingDates = ["2022-01-01", "2022-01-10", "2022-01-15"]; // массив существующих дат $('#datepicker').datepicker({ beforeShowDay: function(date) { var formattedDate = $.datepicker.formatDate('yy-mm-dd', date); if ($.inArray(formattedDate, existingDates) != -1) { return [true, 'highlight', 'This date exists']; // добавляем класс highlight к существующим датам } else { return [true, '', '']; } } }); });
Пример CSS для выделения существующих дат:
.highlight a { background-color: #ffcc00 !important; // желтый цвет для выделения color: #000 !important; }
В данном примере мы создаем массив existingDates, в котором содержатся даты, которые уже существуют. Затем мы используем функцию beforeShowDay, чтобы проверить каждую дату перед отображением в datepicker. Если дата присутствует в массиве existingDates, мы добавляем класс highlight, который определяет стилизацию для существующих дат.
Таким образом, после применения данного кода, вы сможете выделить даты, которые уже есть в air datepicker.