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 - настроить дефолтную тему под себя: цвета, фоны, закругление углов и т.д.;

Готовый код 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

Использовать это дополнение не сложно, порядок действий таков:

1. Скачиваете скрипт и стили дополнения.

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

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

   Также не забудьте подключить ccs стили.

3. Инициализируйте timepicker на input поле так:

   $('input').datetimepicker();