Каким плагином можно реализовать выбор даты в форме?

Question

[rootnoroot]

Нужна форма обратной связи с полем с выбором даты в календаре
НО
нужна возможность исключения определенных дней
пробовал Date Picker For Contact Form 7
там можно исключить только дни на месяц, то есть пн,вт и т.д - они будут исключены для всех недель
а нужна возможность исключать любые дни любой недели

Answer 1

[PolarOne]

В этом плагине такая функция есть в платной версии.


Вот альтернатива. Добавьте сниппет (или в файл 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');

В самой форме добавьте поле для даты
[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>

your-date-field-class - можете заменить на более удобный свой.
Так же пришлось убрать из формы type="date" этой частью $(".your-date-field-class").removeAttr("type"); То календарь дважды всплывал, наш правильный и от браузера без исключенных дат.

Comments

[Refguser]

PolarOne, ты это в ответ написал, а не в коммент.