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 UIor 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:
<?php
// Call the function
datepicker_js();
/**
* Datepicker script
* version: 1
*/
function datepicker_js(){
// Enqueue all necessary scripts: jQuery, jquery-ui, datepicker
wp_enqueue_script('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
else
add_action('wp_footer', 'init_datepicker', 99 ); // for the front-end
function init_datepicker(){
?>
<script type="text/javascript">
jQuery(document).ready(function($){
'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
$.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: ''
});
// Initialization
$('input[name*="date"], .datepicker').datepicker({ dateFormat: 'dd/mm/yy' });
// Additional settings for datepicker can be added like this:
/*
$('input[name*="date"]').datepicker({
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 );
}
});
*/
});
</script>
<?php
}
}
?>
A Brief Analysis of the Code:
wp_enqueue_script('jquery-ui-datepicker');
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: