jQuery Datepicker: Date Selection for Input Field in WordPress

Connecting a script for quick date selection in the <input> field is not difficult, and there are plenty of JS scripts available online for this purpose. In this article, I will provide ready-made code for WordPress.

The task is as follows: we have an input field, and we need to make it so that when the cursor is placed in this field, a calendar appears, allowing us to select a date (day of the month), and the field is automatically filled with the selected date in the required format. The calendar should have Russian localization. This task is quite common, and I thought it would be convenient to have ready-made code at hand.

But first, here are some links that may be useful for customizing the code to suit your needs:

  • jQuery Datepicker main page: https://jqueryui.com/datepicker/ — here you will find various examples of using the Datepicker.

  • jQuery UI theme roller page for CSS customization: http://jqueryui.com/themeroller/ — here you can choose a ready-made theme for jQuery UI or customize the default theme to your preferences using the "Roll Your Own" tab: colors, backgrounds, corner rounding, etc.

To add support for hours/minutes/seconds, use the timepicker plugin.

Ready-made Datepicker Code for WordPress

In WordPress, it is convenient to use jQuery Datepicker because it comes bundled with WordPress, and to connect it, you only need to insert two lines: the script itself and the CSS styles. Then you just need to run the datepicker() JS function on the required <input>.

You can insert this code into any PHP file, not necessarily before the header output get_header(); it can be placed directly in the body of the HTML document, and the code will work:

// Call the function

 * Datepicker script
 * version: 1
function datepicker_js(){
	// Enqueue all necessary scripts: jQuery, jquery-ui, datepicker

	// Enqueue necessary CSS styles
	wp_enqueue_style('jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', false, null );

	// Initialize datepicker
	if( is_admin() )
		add_action('admin_footer', 'init_datepicker', 99 ); // for the admin panel
		add_action('wp_footer', 'init_datepicker', 99 ); // for the front-end

	function init_datepicker(){
		<script type="text/javascript">
			'use strict';
			// Default settings. These can be added to an existing JS file
			// if the datepicker will be used universally on the project and is expected to be run with different settings
				closeText: 'Закрыть',
				prevText: '<Пред',
				nextText: 'След>',
				currentText: 'Сегодня',
				monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
				monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
				dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
				dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
				dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
				weekHeader: 'Нед',
				dateFormat: 'dd-mm-yy',
				firstDay: 1,
				showAnim: 'slideDown',
				isRTL: false,
				showMonthAfterYear: false,
				yearSuffix: ''

			// Initialization
			$('input[name*="date"], .datepicker').datepicker({ dateFormat: 'dd/mm/yy' });
			// Additional settings for datepicker can be added like this:
				dateFormat : 'yy-mm-dd',
				onSelect : function( dateText, inst ){
					// Function for a field where seconds are also specified: 000-00-00 00:00:00 - leaves the seconds
					var secs = inst.lastVal.match(/^.*?\s([0-9]{2}:[0-9]{2}:[0-9]{2})$/);
					secs = secs ? secs[1] : '00:00:00'; // only hh:mm:ss, leave hours, minutes, and seconds as they are, if not, it will be 00:00:00
					$(this).val( dateText +' '+ secs );


A Brief Analysis of the Code:


This line enqueues all necessary scripts using wp_enqueue_script(), including jQuery itself. If jQuery is already included, it won't be included again.

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

This line enqueues the CSS styles using wp_enqueue_style(). Since jquery ui styles are not included in WordPress by default, they need to be separately included (from the Google script library). smoothness in this line is the name of the jquery ui theme, and it can be replaced, for example, with redmond or ui-lightness - full list of themes (for insertion in the line, in the theme name, uppercase letters should be replaced with lowercase, and spaces with hyphens).

// add_action('admin_footer', 'init_datepicker', 99 ); // for the admin panel
add_action('wp_footer', 'init_datepicker', 99 ); // for the front-end

These lines add the init_datepicker() function to the site footer. The function outputs the script that initializes the datepicker for the specified input fields. The fields to which the datepicker will be applied are determined by the following line:

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

This line will initiate date selection for all input fields with a name attribute containing the substring 'date' or for input fields with the datepicker class. That is, this code will apply to any of these fields:

<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 — these are selectors, and you can set your own. I have written more about selectors in the article CSS Selectors, 90% of them work for jQuery too.

Brief Overview of Using Timepicker

When you need to add support for hours/minutes/seconds, use the timepicker plugin.

Using this plugin is not difficult, and the steps are as follows:

  1. Download the script and styles for the plugin.

  2. Include the scripts in the following order:

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

    Also, don't forget to include the CSS styles.

  3. Initialize the timepicker on the input field like this: