Каким плагином можно реализовать выбор даты в форме?
Нужна форма обратной связи с полем с выбором даты в календаре
НО
нужна возможность исключения определенных дней
пробовал Date Picker For Contact Form 7
там можно исключить только дни на месяц, то есть пн,вт и т.д - они будут исключены для всех недель
а нужна возможность исключать любые дни любой недели
Дополнительно:
В этом плагине такая функция есть в платной версии.
Вот альтернатива. Добавьте сниппет (или в файл functions.php) следующий код
// Подключение jQuery и jQuery UI Datepicker через ссылку function load_jquery_and_jquery_ui_datepicker() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-datepicker', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array('jquery'), '1.12.1', true); } add_action('wp_enqueue_scripts', 'load_jquery_and_jquery_ui_datepicker'); // Подключение стилей для jQuery UI Datepicker function load_jquery_ui_datepicker_styles() { wp_enqueue_style('jquery-ui-datepicker', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'); } add_action('wp_enqueue_scripts', 'load_jquery_ui_datepicker_styles'); |
// Подключение jQuery и jQuery UI Datepicker через ссылку function load_jquery_and_jquery_ui_datepicker() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-datepicker', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array('jquery'), '1.12.1', true); } add_action('wp_enqueue_scripts', 'load_jquery_and_jquery_ui_datepicker'); // Подключение стилей для jQuery UI Datepicker function load_jquery_ui_datepicker_styles() { wp_enqueue_style('jquery-ui-datepicker', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'); } add_action('wp_enqueue_scripts', 'load_jquery_ui_datepicker_styles');
В самой форме добавьте поле для даты
[date* your-date class:your-date-field-class]
И в хедере подключите скрипт. Вы можете его и другим способом подключить, у меня на тестовом сайте не работало через functions.php
<script type="text/javascript"> jQuery(document).ready(function($) { $(".your-date-field-class").removeAttr("type"); // Указываем исключаемые даты в формате "yy-mm-dd" var excludedDates = ["2023-08-15", "2023-08-22"]; var isDatepickerInitialized = false; // Функция для проверки, является ли дата исключаемой function isExcludedDate(date) { var formattedDate = $.datepicker.formatDate("yy-mm-dd", date); return (excludedDates.indexOf(formattedDate) !== -1); } // Инициализация datepicker для поля с выбором даты function initializeDatepicker() { $(".your-date-field-class").datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function(date) { return [!isExcludedDate(date)]; } }); isDatepickerInitialized = true; } // Обработчик клика на строке с классом 'your-date-field-class' $(document).on('focus', '.your-date-field-class', function() { if (!isDatepickerInitialized) { initializeDatepicker(); } }); }); </script> |
<script type="text/javascript"> jQuery(document).ready(function($) { $(".your-date-field-class").removeAttr("type"); // Указываем исключаемые даты в формате "yy-mm-dd" var excludedDates = ["2023-08-15", "2023-08-22"]; var isDatepickerInitialized = false; // Функция для проверки, является ли дата исключаемой function isExcludedDate(date) { var formattedDate = $.datepicker.formatDate("yy-mm-dd", date); return (excludedDates.indexOf(formattedDate) !== -1); } // Инициализация datepicker для поля с выбором даты function initializeDatepicker() { $(".your-date-field-class").datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function(date) { return [!isExcludedDate(date)]; } }); isDatepickerInitialized = true; } // Обработчик клика на строке с классом 'your-date-field-class' $(document).on('focus', '.your-date-field-class', function() { if (!isDatepickerInitialized) { initializeDatepicker(); } }); }); </script>
your-date-field-class - можете заменить на более удобный свой.
Так же пришлось убрать из формы type="date" этой частью $(".your-date-field-class").removeAttr("type"); То календарь дважды всплывал, наш правильный и от браузера без исключенных дат.
- PolarOne, ты это в ответ написал, а не в коммент.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для формы с выбором даты и исключением произвольных дат нужен datepicker, который поддерживает
beforeShowDay. В Contact Form 7 это можно сделать без тяжёлого плагина: подключить jQuery UI Datepicker или flatpickr и передать массив запрещённых дат.Пример на jQuery UI:
jQuery(function ($) { const disabledDates = [ '2026-05-20', '2026-05-27', '2026-06-03' ]; $('.js-date-field').datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: function (date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); const formatted = y + '-' + m + '-' + d; return [!disabledDates.includes(formatted)]; } }); });jQuery(function ($) { const disabledDates = [ '2026-05-20', '2026-05-27', '2026-06-03' ]; $('.js-date-field').datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: function (date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); const formatted = y + '-' + m + '-' + d; return [!disabledDates.includes(formatted)]; } }); });
В CF7 полю даты задайте класс:
[text* booking-date class:js-date-field placeholder "Выберите дату"]
Если исключённые даты должны меняться из админки, храните их в опции, ACF options page или отдельном CPT, а в JS передавайте через
wp_localize_script(). Для коммерческой формы лучше дополнительно проверять дату на сервере при отправке, потому что пользователь может обойти JS и отправить запрещённую дату вручную.Если нужен более современный интерфейс, берите flatpickr: он легче и удобнее на мобильных. У него есть параметр
disable, куда можно передать массив дат или функций. Но принцип тот же: фронт запрещает выбор для удобства, серверная проверка защищает от некорректной отправки.Для бронирования или записи на услугу обязательно продумайте часовой пояс и формат даты. Лучше хранить дату в одном техническом формате
Y-m-d, а пользователю показывать привычный русский формат только в интерфейсе. Так вы избежите ситуации, когда дата 05.06.2026 в одном месте читается как 5 июня, а в другом как 6 мая.