How to add jQuery UI Datepicker in WordPress

• February 9, 2016
• Leave a comment

JQuery UI Datepicker library once integrated with WordPress allows a user to view all posts for a selected date using advance search feature. Users don’t have to go through different pages to find a particular article for a date they want to see. Simply they can select the date from jQuery calendar and with just a single click, all data will be displayed for that particular date.

Below is the guideline for adding jQuery datepicker:

1. Add WordPress core jQuery UI Datepicker library to your theme’s functions.php file:
   
   <?php wp_enqueue_script('jquery-ui-datepicker'); ?>

   1 2 3

   <?php wp_enqueue_script('jquery-ui-datepicker'); ?>

2. To add theme of your own choice to calendar, paste the following code once jQuery UI datepicker is enqueued:
   
   <?php wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); ?>

   1 2 3

   <?php wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); ?>

3. Here is the JavaScript code for binding datepicker event with text label and “update_date” class:
   
   <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.update_date').datepicker({ dateFormat : 'mm-dd-yy' }); }); </script>

   1 2 3 4 5 6 7

   <script type="text/javascript"> jQuery(document).ready(function() {     jQuery('.update_date').datepicker({         dateFormat : 'mm-dd-yy'     }); }); </script>