Как создать автозаполняемый формат даты в WordPress

Работа с датами в WordPress часто требует гибкости и удобства, особенно если на сайте есть формы для пользователей или административная часть, где нужно быстро и корректно вводить дату. В этой статье мы подробно рассмотрим, как создать автозаполняемый формат даты в WordPress, чтобы пользователи могли вводить дату с подсказками и автозаполнением, а разработчики — легко интегрировать такую функциональность в темы и плагины.

Зачем нужен автозаполняемый формат даты в WordPress

Часто при создании форм на сайте, будь то контактные формы, формы бронирования или публикации пользовательского контента, возникает задача сделать ввод даты максимально удобным и безопасным. Автозаполнение помогает снизить количество ошибок при вводе, ускоряет работу пользователя и улучшает UX.

Кроме того, правильно оформленный формат даты упрощает последующую обработку данных и их хранение в базе данных. В WordPress по умолчанию нет встроенного удобного механизма автозаполнения даты, поэтому приходится использовать либо сторонние решения, либо создавать свои.

Выбор плагина для автозаполнения даты

Для начала рассмотрим несколько популярных плагинов, которые можно использовать для реализации автозаполняемой даты:

• Contact Form 7 Datepicker — расширение для CF7, добавляет календарь с выбором даты и автозаполнением.
• WP Datepicker — плагин, который позволяет добавить удобный календарь к любым формам с помощью шорткодов.
• Advanced Custom Fields (ACF) — с его помощью можно создавать поля даты с выбором из календаря, что удобно для админки.

Однако если вам нужно более тонко настроить автозаполнение и формат даты, лучше реализовать собственное решение с использованием JavaScript-библиотеки jQuery UI Datepicker, которая уже включена в WordPress.

Как реализовать автозаполняемый формат даты с помощью jQuery UI Datepicker

WordPress по умолчанию включает библиотеку jQuery UI, которая содержит виджет Datepicker. Его можно подключить и настроить под свои нужды.

Подключение скриптов и стилей

Для начала зарегистрируем и подключим необходимые скрипты и стили в functions.php вашей темы или плагина:

function wpskill_enqueue_datepicker() {
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'wpskill_enqueue_datepicker');

Это подключит календарь и стили из официального CDN jQuery UI.

Создание поля ввода даты с автозаполнением

Добавим в нужное место формы HTML-элемент:

<input type="text" id="wpskill_datepicker" name="wpskill_date" placeholder="Выберите дату" autocomplete="off" />

Инициализация Datepicker с нужным форматом

Добавим JavaScript для инициализации календаря с нужным форматом даты, например, дд.мм.гггг:

function wpskill_datepicker_init() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('#wpskill_datepicker').datepicker({
            dateFormat: 'dd.mm.yy',
            changeMonth: true,
            changeYear: true,
            yearRange: 'c-100:c+10',
            showAnim: 'slideDown'
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'wpskill_datepicker_init');

Обратите внимание, что мы используем хук wp_footer, чтобы добавить скрипт внизу страницы, после загрузки jQuery.

Обработка даты на сервере и сохранение в базе данных

После того как пользователь выбрал дату и отправил форму, необходимо правильно обработать и сохранить дату. В WordPress для хранения дат в БД обычно используется формат Y-m-d.

Пример функции, которая преобразует полученную из формы дату в нужный формат и сохраняет в метаполе поста:

function wpskill_save_post_date_meta($post_id) {
    if (isset($_POST['wpskill_date']) && !empty($_POST['wpskill_date'])) {
        $raw_date = sanitize_text_field($_POST['wpskill_date']);
        $date_obj = DateTime::createFromFormat('d.m.Y', $raw_date);
        if ($date_obj) {
            $formatted_date = $date_obj->format('Y-m-d');
            update_post_meta($post_id, '_wpskill_custom_date', $formatted_date);
        }
    }
}
add_action('save_post', 'wpskill_save_post_date_meta');

Тут мы применяем DateTime::createFromFormat для преобразования даты из формата, используемого в форме, в формат, удобный для БД.

Валидация и вывод даты в нужном формате

Важно не только сохранить дату, но и вывести её для пользователя в удобном формате. Для этого можно использовать обратное преобразование:

function wpskill_get_formatted_date($post_id) {
    $raw_date = get_post_meta($post_id, '_wpskill_custom_date', true);
    if ($raw_date) {
        $date_obj = DateTime::createFromFormat('Y-m-d', $raw_date);
        if ($date_obj) {
            return $date_obj->format('d.m.Y');
        }
    }
    return '';
}

Также рекомендуется добавить валидацию даты на стороне клиента с помощью JavaScript и на сервере для предотвращения некорректных данных.

Использование плагина Clearfy Pro для упрощения работы с датами

Если вы хотите дополнительно улучшить работу с формами и датами, плагин Clearfy Pro предоставляет множество функций оптимизации, включая удобные настройки безопасности и производительности, которые помогут избежать конфликтов с библиотеками и улучшить работу скриптов на сайте.

Заключение

Автозаполняемый формат даты в WordPress значительно повышает удобство работы с формами, снижает количество ошибок и упрощает обработку данных. Используя встроенный jQuery UI Datepicker и собственные функции для сохранения и вывода даты, вы получаете гибкое и надежное решение без лишних зависимостей.

Таким образом, вы легко адаптируете функционал под свои задачи и обеспечите пользователям удобный и понятный интерфейс для ввода дат.