jQuery UI Datepicker in WordPress Admin

jQuery UI Datepicker in WordPress Admin 1

If you create your own WordPress plugins or themes, you will probably have found yourself in a situation where you have added a date field to a plugin’s admin page – maybe a date associated with a custom post type, or something like that – and you want to make life a little easier by using a datepicker script on the field.

You probably figured that since WordPress makes significant use of jQuery on the admin pages, it should be easy – and more efficient – to use the jQuery UI Datepicker.

Then you probably did some googling and found that people encountered a lot of problems trying to implement a datepicker this way.

Fear not – now that WordPress is on version 3.1.x, it’s actually much easier to get a jQuery UI datepicker working in WordPress admin, and here is my quick guide to implementing one.

1. Check your version

When WordPress 3.1 was released, the bundled version of jQuery UI was updated, to 1.8.9. This is important. If you are not running WordPress 3.1 or later, the solution in this article will not work. I’ll say it again but bigger:

If you are not running WordPress 3.1 or later, this solution will not work.

And more to the point, why are you using an out-of-date version anyway? Go and upgrade!

2. Get the files

Though WordPress 3.1.x bundles most of the jQuery UI files, for some reason it does not include the files we want! You’ll need the datepicker script file itself, and one of the jQuery UI theme folders to provide some style.

But it’s easy to get them. Just do the following:-

  1. Go to http://jqueryui.com/download
  2. On the right sidebar, select the jQuery UI theme you want to use. The theme shown in the screenshot above is “Smoothness”.
  3. Also in the sidebar, check that the version selected is 1.8.x Stable (where x is some number).
  4. In the main area, you can deselect all items in the “Interactions” and “Effects” sections if you want. The file you need is in the “Widgets” section.
  5. Click the big Download button.

You now have a file called jquery-ui-1.8.x.custom.zip (where x is currently 12 but may change in the future) – place it on your desktop or somewhere else easy to get to.

Very occasionally, this process results in a corrupted zip file. If you can’t unzip it, delete it and simply repeat the steps above.

3. Add the files to your plugin

I’m going to assume that you’ll place the datepicker script file and the theme folder directly into your plugin folder. If your plugin has subfolders for script and style files, you’ll need to take that into account.

post-datepicker-folder

  1. Unzip the downloaded file, and browse its contents to development-bundleuiminified. From that folder, copy jquery.ui.datepicker.min.js to your plugin folder.
  2. Now browse to the zip file’s themes folder, and copy your chosen theme folder to your plugin folder. In my case, the folder I copied was called smoothness.

When you’ve done this, your plugin folder will hopefully look something like the mini-screenshot just above.

4. Make your plugin load the files

You should do this by using WordPress’s admin_init action hook. Here’s a basic code example.

function my_admin_init() {
$pluginfolder = get_bloginfo('url') . '/' . PLUGINDIR . '/' . dirname(plugin_basename(__FILE__));
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', $pluginfolder . '/jquery.ui.datepicker.min.js', array('jquery', 'jquery-ui-core') );
wp_enqueue_style('jquery.ui.theme', $pluginfolder . '/smoothness/jquery-ui-1.8.12.custom.css');
}
add_action('admin_init', 'my_admin_init');

If you create your plugins as a class (and you should, really), then you’ll need to move the last line of code into your constructor and make it look like this instead:

add_action('admin_init', array($this, 'my_admin_init'));

And make sure that the filename in the wp_enqueue_style statement shows the version number that matches your download.

5. Trigger the datepicker

You’re almost there. All you have to do now is tell your plugin which field(s) to apply the datepicker to.

Firstly you must make sure that each field that you want to apply the datepicker to, has a class so it can be identified. In the example below I’ve assumed that all the date fields in my plugin’s admin pages have the class mydatepicker (obviously you can choose your own, or use an ID, or whatever else suits you).

Finally, your plugin must place a tiny piece of code at the end of the admin page, and the best way to do this is by using the admin_footer action hook. Again, here’s a basic code example which you can adapt to your needs.

function my_admin_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.mydatepicker').datepicker({
dateFormat : 'yy-mm-dd'
});
});
</script>
<?php
}
add_action('admin_footer', 'my_admin_footer');

And that’s it.

I’m sure that you will have to tweak the code examples I’ve given to suit your plugin and the way you develop, but hopefully you are now on the right track.

Disclaimer: if a future version of WordPress bundles a different version of jQuery and the jQuery UI, the solution provided in this article may stop working.

IMPORTANT

All content on the ZigPress website is copyrighted. You may not republish or syndicate any article or other content without explicit permission.

31 Comments

  1. Thanks for the info, I’ve been hunting for a a guide to walk me through how to do this – I’m a newbie and still a bit “wet behind the ears”

  2. Even though it took me a while to go through the steps because I was trying so hard to do it right, this is a great step-by-step solution. Thanks so much for the detailed guide, it is very appreciated from someone who is new to this stuff!

  3. Thank you for the excellent instructions,this as helped me a lot ,once again thank you

  4. Thank you for all the useful information. It’s nice to see someone take the time to explain step by step how everything needs to be. I think it will definitely come handy in the near future for me.

  5. Thank you. The instructions were clear. Like others I spent a lot of time hitting google before I found this.

  6. The instructions look clear and to the point even though I’m terrified by the idea of having to put hands on the code..

  7. Very useful but now there’s Ver 3.2, let’s see if this still works. Thanks for the quick tutorial! :)

  8. Hi, thanks for this tutorial.

    A small tip, replace the following line

    $pluginfolder = get_bloginfo(‘url’) . ‘/’ . PLUGINDIR . ‘/’ . dirname(plugin_basename(__FILE__));

    with this line

    $pluginfolder = plugins_url();

    Source:
    http://codex.wordpress.org/Function_Reference/plugins_url

    Thanks again for the tutorial.

  9. Thanks for the very clear tutorial.

  10. Thanks. This is a simple and very clear tutorial. This was what I need.

  11. I followed the steps above, but am getting an error:
    ” jQuery(‘.mydatepicker’).datepicker is not a function ”
    Any insight as to what I might be missing?
    Thanks.

  12. @Joe: you’re not loading all the required files correctly. Check section 4 of the article carefully.

  13. Great tutorial! Thanks a lot!

  14. Thank you – very helpful.I was able to integrate this datepicker easily, however I cannot get the style to work. Any ideas?

  15. Thanks for this, it saved me some time today.

    @Thomas Herold – make doubly sure you have included the CSS properly, make sure the path is correct and the version number hasn’t changed between the example and what you downloaded.

  16. Thx very much, simple, clear and fast !

  17. The Datepicker widget was bundled with WordPress 3.3, so you don’t need to include your own copy anymore.

  18. where to put this code i m realy confused.

    function my_admin_init() {
    $pluginfolder = get_bloginfo(‘url’) . ‘/’ . PLUGINDIR . ‘/’ . dirname(plugin_basename(__FILE__));
    wp_enqueue_script(‘jquery’);
    wp_enqueue_script(‘jquery-ui-core’);
    wp_enqueue_script(‘jquery-ui-datepicker’, $pluginfolder . ‘/jquery.ui.datepicker.min.js’, array(‘jquery’, ‘jquery-ui-core’) );
    wp_enqueue_style(‘jquery.ui.theme’, $pluginfolder . ‘/smoothness/jquery-ui-1.8.12.custom.css’);
    }
    add_action(‘admin_init’, ‘my_admin_init’);

    and also there is no file with such name jquery.ui.datepicker.min.js
    but jquery.ui.datepicker.js

    i m using versin 1.8.16

    i m new to wordpress and jquery plz help me out

  19. Wordpress now supports the datepicker script

    you just en-queue it

    Check http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress

  20. Great article, was really helpfull. Well explained. Many thanks

  21. Thanks. Very useful. Now the datepicker is running :-)

  22. I spent 9 hours getting the datepicker to show up on my dynamic pages, by putting an ‘enqueue scripts’ in some bullshit location that made no sense. Although it showed up in the admin panel, now, the datepicker shows up in the dynamic pages, but not the fucking admin panel. This shouldn’t even be a problem that exists. We are wasting our fucking lives as a society, collectively on stupid-fuck OCD computer code horseshit.

  23. Ah! Finally got it to work. The problem was that whoever wrote the plugin (Eventify) added a unfathomable function to disable jQuery if on the admin page. I changed it to do the opposite. Now the stupid datepicker works on both, 10 hours later. Fantastic. My friend warned me not to try to design websites if you are a creative person. It is 100% number worship, cold logic and robot-faced machine design. We are employees of computers now.

  24. Thanks a lot, exactly what I was looking for :)

  25. Thanks a lot, I was spending hours to find this solution. This is the exact thing what I was looking for :)

  26. WordPress 3.3 and above now includes the datepicker, so you now only need step 5, with the additional code wp_enqueue_script(‘jquery-ui-datepicker’); at some point.

  27. It is recommended to load your plugin in the `plugins_loaded` hook, and to enqueue the scripts on `admin_enqueue_scripts`.

  28. datepicker is not running. I am really confused about this and new update. Can anybody tells me why datepicker is not running?

  29. Great to find a well detailed tutorial. Cheers

  30. Had no idea how simple it was to get jQueryUI in to the WP back end. Thanks so much for posting this, very well written and succint.

  31. Excellent tutorial.
    I would like to add a validation of the entered date, how do you do?
    Can you add this to your tutorial?
    thank you