Date Picker is a pretty neat tool especially if you are creating or managing a time based website in which the content is time dependent such as news and articles. In this article, we are going to take a look at how to add a Date Picker to a WordPress website. For this, we are going to use jQuery. jQuery inherently provides the Date Picker in its UI Library. We are going to integrate it into our WordPress website.

1. Enqueueing jQuery

The first thing that needs to be done is enqueue jQuery and its UI library. Luckily for us, WordPress has jQuery bundled with it. We need to enqueue jQuery and the library for Date Picker extension. Add the following code to your functions.php –

[code lang=”php”]
function yourtheme_datepicker() {
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘jquery-ui-datepicker’);
}

add_action(‘wp_enqueue_scripts’, ‘yourtheme_datepicker’);
[/code]

Note that you can also enqueue datepicker library directly where other CSS and JS files are being enqueued. The appropriate function is usually found in functions.php.

2. Creating HTML Markup

Now, you need to create the frontend datepicker control.For this, I am going to use a Text Field. For the sake of convenience, I will be placing the text field in header.php just below

. Also, I will be using the code for an E-Paper Website I created. Add the following code to your header.php just below

–

[code lang=”html”]
<div id="date-picker">
<form method="get" role="search" action="<?php echo home_url( ‘/’ ) ?>">
<label>
Search for the Paper online
</label>
<input type="hidden" name="search" value="paper">
<input type="text" autocomplete="off" class="date-input" name="epaper" value="<?php echo (isset($_GET[‘epaper’]) ? $_GET[‘epaper’] : ” ) ?> " readonly>
<input type="submit" class="date-submit" value="Submit">
</form>
</div>
[/code]

This is a simple text field with a submit button. There is also a hidden input field which is used in the search process. The value of the text field is checked and the saved value is displayed in the text field. Also notice I have disabled autocomplete and it is a readonly field. This is to make sure that there is no unintended input and only the desired date is entered in the field. Now, we have a labelled text field along with a Submit Button but nothing will work right now. To make it work, we need help of some jQuery.

3. Making the Date Picker work

You will need to add some custom JS code to your frontend. Here, I am assuming you already have a JS file for frontend. If not, create a custom.js file and place it in js folder in the theme directory and enqueue it. Let’s head back to the function we created to enqueue Date Picker UI – yourtheme_datepicker. Add the following codein the function –

[code lang=”php”]
wp_enqueue_script( ‘jquery-custom’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );
[/code]

Mind you, this is only required if you already don’t have a JS file for frontend.

Now, with the JS file in place, add the following code in custom.js –

[code lang=”js”]
jQuery(document).ready( function() {
jQuery(‘input.date-input’).datepicker();
});
[/code]

Note that the text field needs to be selected, so we passed the class of the text field. With this code, the Date Picker should be working and clicking on the text field will open up the calendar to select a date. Right now, it is a raw calendar with no styling. We can provide custom styling but for convenience, jQuery provides some custom skins for its UI extensions. We are going to make use of a skin named ‘smoothness’. The skin is going to be loaded using CDN. Add the following code to the yourtheme_datepicker() function –

wp_enqueue_style( ‘datepicker-style’, https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css, array(), null) );

The complete yourtheme_datepicker() function should look like this now –

[code lang=”php”]
function yourtheme_datepicker() {
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘jquery-ui-datepicker’);

wp_enqueue_script( ‘jquery-custom’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );

wp_enqueue_style( ‘datepicker-style’, https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css, array(), null) );
}

add_action(‘wp_enqueue_scripts’, ‘yourtheme_datepicker’);
[/code]

Now, the Date Picker should be working. On clicking in the Text Field, the calendar pops up and after selecting a date, the calendar fades away and the selected date gets filled in the text field.
Since the text field is readonly, this text is safe and cannot be removed.

4. Enabling the Search Functionality

Now, the Date Picker is working but pressing the submit button will not do anything. In order to perform a search operation, we need to add a minor code snippet in functions.php –

[code lang=”php”]
function yourtheme_search_tmpl( $template ) {
if( isset($_REQUEST[‘search’]) == ‘paper’ ) {
require(get_template_directory().’/epaper-search-result.php’);
die();
}
return $template;
}
add_action(‘init’, ‘yourtheme_search_tmpl’);
[/code]

This is a rather simple code which performs the search operation whenever the Submit button is pressed and loads the epaper-search-result.php file. This is similar to the standard search.php file which is already present in the theme directory by default. The only difference being that in this case, a custom query is created in which the string ( date ) saved using the datepicker is also checked. Here is an example of the query for search-results.php –

[code lang=”php”]
$date = $_GET[‘epaper’];

$p_args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘ignore_sticky_posts’ => true,
‘s’ => $date
);
[/code]

Here, the saved value of the Text Field is called using $_GET and saved in the $date variable. In the query, all the posts which contain the saved date are returned in the loop. There are an infinite number of things that can be done with the returned posts.

So, this was the basic integration and working of a Date Picker in a WordPress website. The Date Picker is used to select a date from a dropdown Calendar and store the date in the form of a string in the server using the Global Variables. The default format for the date is (DD Month, YYYY). This string is then used to sort posts and other data such as media attachments.
Hope you learned something new from this article. Try integrating it in your site. Hit me up if you encounter any problem. Happy learning!