jQuery UI Datepicker in WordPress Admin

Published 27 Apr 2011 in JavaScript & jQuery, PHP & MySQL, Plugins, WordPress by ZigPress

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.


  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-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">
dateFormat : 'yy-mm-dd'
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.


  1. On 30 Apr 2011 at 08:19, Magssno said:

    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. On 04 May 2011 at 17:51, Sarah Harris said:

    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. On 04 May 2011 at 23:37, paula said:

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

  4. On 05 May 2011 at 05:05, Edenpure said:

    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. On 17 May 2011 at 18:12, Craig said:

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

  6. On 23 May 2011 at 20:21, aMa photographer said:

    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. On 27 May 2011 at 10:47, Free Books said:

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

  8. On 23 Jul 2011 at 14:13, Gabriel Reguly said:

    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();


    Thanks again for the tutorial.

  9. On 03 Aug 2011 at 11:52, Sam said:

    Thanks for the very clear tutorial.

  10. On 24 Aug 2011 at 12:23, Doc said:

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

  11. On 17 Sep 2011 at 19:23, Joe said:

    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?

  12. On 18 Sep 2011 at 09:21, ZigPress said:

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

  13. On 02 Oct 2011 at 05:57, Bliz said:

    Great tutorial! Thanks a lot!

  14. On 08 Oct 2011 at 05:33, Thomas Herold said:

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

  15. On 11 Oct 2011 at 14:36, Toby Osbourn said:

    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. On 22 Nov 2011 at 12:19, Yor Tank said:

    Thx very much, simple, clear and fast !

  17. On 14 Dec 2011 at 21:02, Ian Dunn said:

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

  18. On 16 Dec 2011 at 08:59, kk said:

    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-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. On 15 Feb 2012 at 19:15, Ayoub said:

    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. On 02 Jun 2012 at 00:30, alemarte said:

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

  21. On 19 Jun 2012 at 13:58, Schierke said:

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

  22. On 23 Jun 2012 at 01:01, Jack said:

    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. On 23 Jun 2012 at 01:42, Jack said:

    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. On 29 Jun 2012 at 10:37, Tom said:

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

  25. On 24 Jul 2012 at 14:22, Ajith said:

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

  26. On 21 Aug 2012 at 19:17, Mark Barnes said:

    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. On 04 Sep 2012 at 23:11, Vinicius Massuchetto said:

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

  28. On 04 Nov 2012 at 10:56, fahimimax said:

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

  29. On 21 Nov 2012 at 15:35, William said:

    Great to find a well detailed tutorial. Cheers

  30. On 03 Jan 2013 at 21:51, Casey Wise said:

    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. On 07 Mar 2013 at 11:02, luciole135 said:

    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