Adding datepicker to WordPress Plugin Admin

In this tutorial I will show you how easily you can add a datepicker in all the date fields of your WordPress plugin admin interface.

Step 1) Add the JavaScript Library

We are we going to use the jquery datepicker library as it comes with WordPress already.

Add the following line of code to enqueue the jquery ui datepicker library from your plugin:

wp_enqueue_script('jquery-ui-datepicker');

You will need to add the above line inside the code that handles WordPress’s “init hook”.

Step 2) Add the CSS File

Next, you need to enqueue the jquery ui CSS stylesheet file the same way you added the JS library in step 1.

You can download the stylesheet file from the jquery ui library site and include it in your plugin. You would then enqueue the CSS file like the following:

wp_enqueue_style('jquery-ui-css', 'http://www.example.com/your-plugin-path/css/jquery-ui.css');

Alternatively, You can include the jquery ui CSS from Google (you don’t need to ship the CSS files with your plugin if you go via this route):

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

Step 3) Add JQuery Code to Attach Calendar to the Date Fields

Add the following JQuery code to your javascript file so it attaches the datepicker to any fields with a class of “custom_date”:

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

Step 4) Add the CSS Class to Your Date Fields

Now, you can simply add class “custom_date” to the date fields in the HTML code and it will show a date picker calender when a user clicks on that field.

Here is an example of how your date field HTML code should look like:

<input type="text" class="custom_date" name="start_date" value=""/>

That should do it. Now you can easily add a date picker calendar to all the date fields in your WordPress plugin’s admin interface.