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',
				першийДень: 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 для зазначених ввімкнених полів. До якого поля приміряти 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();