jQuery Datepicker в WordPress: быстрый выбор даты для поля ввода

# JQUERY DATEPICKER: ВЫБОР ДАТЫ ДЛЯ ПОЛЯ ВВОДА В WORDPRESS

Добавить скрипт для быстрого выбора даты в поле ввода <input> несложно. Существует множество готовых JavaScript-скриптов, которые справляются с этой задачей. В этой статье я предоставлю готовый код для WordPress, который поможет вам сделать это легко.

## Задача

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

## Готовый Код Datepicker для WordPress

В WordPress удобно использовать jQuery Datepicker, потому что он уже включён в его состав. Для подключения вам нужно вставить всего две строки: сам скрипт и CSS стили. Затем просто вызовите функцию datepicker() на нужном элементе <input>.

Вы можете вставить этот код в любой PHP файл. Он может находиться даже после вывода заголовка get_header(). Можно разместить его непосредственно в теле HTML документа, и код будет работать:

```php

        
        

Краткий анализ кода:

1. Подключение скриптов:

   wp_enqueue_script('jquery-ui-datepicker');

   Эта строка подключает все необходимые скрипты, включая сам jQuery. Если jQuery уже подключен, он не будет добавлен снова.

2. Подключение стилей:

   wp_enqueue_style('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', false, null );

   Эта строка подключает CSS стили для jQuery Datepicker. Так как стили jQuery UI не включены в WordPress по умолчанию, их нужно подключать отдельно из библиотеки Google. В данном случае название темы — smoothness. Вы можете заменить его на redmond или ui-lightness.

3. Инициализация datepicker:

   add_action('wp_footer', 'init_datepicker', 99 ); // для фронтенда

   Эта строка добавляет функцию init_datepicker() в подвал сайта, которая инициализирует datepicker для указанных полей ввода.

4. Выбор полей:

   $('input[name*="date"], .datepicker').datepicker();

   Эта строка инициирует выбор даты для всех полей ввода, имена которых содержат подстроку 'date', или для полей с классом datepicker.

Использование Timepicker

Если вам нужно добавить поддержку часов, минут и секунд, используйте плагин Timepicker.

Шаги для добавления Timepicker:

1. Скачайте скрипт и стили:

   • Скачать скрипт [jquery-ui-timepicker-addon.js]
   • Скачать стили [jquery-ui-timepicker-addon.css]

2. Подключите скрипты в следующем порядке:

   1. jQuery
   2. jQueryUI: datepicker и slider
   3. Timepicker

   Не забудьте подключить и CSS стили.

3. Инициализируйте timepicker на нужном поле ввода:

   $('input').datetimepicker();

Теперь вы знаете, как добавить Datepicker и Timepicker в ваш проект на WordPress. Это упрощает процесс выбора даты и времени и делает ваш сайт более удобным для пользователей.