jQuery Datepicker: выбор даты для поля input в WordPress
Подключить скрипт для быстрой установки даты в поле <input> не сложно и JS скриптов для этого в сети хватает. А в этой статье я выложу готовый код для WordPress.
Задача такая: у нас есть input поле и нам нужно сделать так, чтобы при установке курсора в это поле появлялся календарь, где бы можно было выбрать дату (день месяца) и поле автоматически заполнилось выбранным числом в нужном формате. Календарь должен быть с русской локализацией. Такая задача встречается часто и я подумал будет удобно иметь под рукой готовый код.
Но для начала ссылки, которые могут пригодится для изменения кода под свои нужды:
-
Главная страница jQuery плагина Datepicker: https://jqueryui.com/datepicker/ — здесь вы найдете разные пример использования Datepicker;
- Страница подбора css тем под jQuery UI — http://jqueryui.com/themeroller/ — здесь вы можете выбрать готовую тему
jQuery UI
или во вкладкеRoll Your Own
- настроить дефолтную тему под себя: цвета, фоны, закругление углов и т.д.;
Чтобы добавить поддержку часов/минут/секунд, используйте дополнение timepicker.
Готовый код Datepicker для WordPress
В WordPress подключать именно jQuery Datepicker удобно, потому что он идет в комплекте с WordPress и для его подключения нужно вставить всего две строки: подключение самого скрипта и подключения стилей CSS. А дальше нужно просто запустить js функцию datepicker() на нужном <input>.
Этот код можно вставлять в любое место php файла, не обязательно до вывода шапки get_header(), можно прямо в тело HTML документа - код будет работать:
<?php // Вызываем функцию datepicker_js(); /** * скрипт выбора даты datepicker * version: 1 */ function datepicker_js(){ // подключаем все необходимые скрипты: jQuery, jquery-ui, datepicker wp_enqueue_script('jquery-ui-datepicker'); // подключаем нужные css стили wp_enqueue_style('jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', false, null ); // инициализируем datepicker if( is_admin() ) add_action('admin_footer', 'init_datepicker', 99 ); // для админки else add_action('wp_footer', 'init_datepicker', 99 ); // для основной версии сайта function init_datepicker(){ ?> <script type="text/javascript"> jQuery(document).ready(function($){ 'use strict'; // настройки по умолчанию. Их можно добавить в имеющийся js файл, // если datepicker будет использоваться повсеместно на проекте и предполагается запускать его с разными настройками $.datepicker.setDefaults({ closeText: 'Закрыть', prevText: '<Пред', nextText: 'След>', currentText: 'Сегодня', monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'], monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'], dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'], dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'], dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], weekHeader: 'Нед', dateFormat: 'dd-mm-yy', firstDay: 1, showAnim: 'slideDown', isRTL: false, showMonthAfterYear: false, yearSuffix: '' } ); // Инициализация $('input[name*="date"], .datepicker').datepicker({ dateFormat: 'dd/mm/yy' }); // можно подключить datepicker с доп. настройками так: /* $('input[name*="date"]').datepicker({ dateFormat : 'yy-mm-dd', onSelect : function( dateText, inst ){ // функцию для поля где указываются еще и секунды: 000-00-00 00:00:00 - оставляет секунды var secs = inst.lastVal.match(/^.*?\s([0-9]{2}:[0-9]{2}:[0-9]{2})$/); secs = secs ? secs[1] : '00:00:00'; // только чч:мм:сс, оставим часы минуты и секунды как есть, если нет то будет 00:00:00 $(this).val( dateText +' '+ secs ); } }); */ }); </script> <?php } } ?>
Небольшой разбор кода:
wp_enqueue_script('jquery-ui-datepicker');
Эта строка подключает все необходимые скрипты с помощью wp_enqueue_script(), включая сам jQuery. Если jQuery уже подключен, то он подключаться не будет.
wp_enqueue_style('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', false, null );
Эта строка подключает css стили с помощью wp_enqueue_style(). Стили jquery ui в комплект WordPress не входят, поэтому подключаем их отдельно (с библиотеки скриптов от Google). smoothness
в этой строке это название jquery ui темы и её можно заменить, например на redmond
или ui-lightness
- полный список тем (для вставки в строку, в названии темы нужно заменить заглавные буквы на строчные, а пробелы на дефис).
// add_action('admin_footer', 'init_datepicker', 99 ); // для админки add_action('wp_footer', 'init_datepicker', 99 ); // для лицевой части
Эти строки подключают функцию init_datepicker() в подвал сайта. Функция выводит скрипт, который запускает datepicker для указанных input полей. К какому полю примерить datepicker определяется в строке:
$('input[name*="date"], .datepicker').datepicker();
Эта строка запустит выбор даты для всех input полей в атрибуте name которых есть подстрока 'date' или если input поле имеет класс datepicker. Т.е. этому коду будут соответствовать любые из таких полей:
<input name="end_date" type="text"> <input name="date_event" type="text"> <input name="start_date_event" type="text"> <input class="datepicker" name="foo" type="text">
input[name*="date"], .datepicker
— это селекторы, вы можете установить свои, подробнее о селекторах я писал в статье CSS селекторы, 90% из них работают и для jQuery.
Коротко об использовании timepicker
Когда нужно добавить поддержку часов/минут/секунд используйте дополнение timepicker
Использовать это дополнение не сложно, порядок действий таков: