Does Wordpress Provide Native Datepicker in Admin?

am developing a plugin and in the admin where I provide a field that is filled in by users with a date. I am wondering if there is a native datepicker in the WP Admin I that is available.

I usually include a small jQuery datepicker script that does it, but if one is already available I would prefer that for obvious reasons like lighter code, UI consistency, etc. This seems like something that would/should be included but I've not been able to find such documentation on what jQuery stuff, if any, are available in the Admin.

jquery wordpress datepicker

shareimprove this question

asked Feb 19 '14 at 1:27

CChoma

7531720

add a comment

3 Answers

activeoldestvotes

up vote14down vote

Answer has already been given, but I'd like to extend it a bit to include CSS (Wordpress doesn't provide stylesheets for jQuery UI), to help anyone passing trying to use this kind of scripts.

Basically (and very simply), you need to have at least these three lines of code:

    wp_enqueue_script('jquery-ui-datepicker');
    wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
    wp_enqueue_style('jquery-ui');

Explanation line by line:

1. Load jQuery UI Datepicker (library already registered by Wordpress, nothing else is necessary)
2. Register Stylesheet with handle jquery-ui (I used the one hosted by Google, you can use whichever you prefer)
3. Effectively include stylesheet into the ones loaded by Wordpress in this page

And now your Datepickers will all be nice and colourful! :)

HTML5 gift

This is not what the OP was asking for, but it's somewhat related to the question: if you don't want to bother adding the Datepicker, you could try the HTML5 date input type, letting the browser create a very nice (and default) datepicker:

<input type="date" name="the_date" />

Yes, nothing else is needed (and it works in the back-end of Wordpress, too: https://jsfiddle.net/2jxdvea0/

More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Note As @mark pointed out, the input does not work for Firefox (as well as for other browsers). This is noted in the MDN page, but of course it should be mentioned here as well. There are, of course, workarounds to this problem, but it would be beyond the sake of this question to write about them.

Update 03-11-2017 As of @kosso's comment, Firefox support for this is coming in version 57

shareimprove this answer

edited Nov 3 '17 at 14:30

answered Oct 19 '16 at 13:33

Erenor Paz

1,79422436

add a comment

up vote10down voteaccepted

Yes. Wordpress includes this in the core. Here are a couple articles about it:

WP Codex: Function Reference/wp enqueue script

Paul Underwood's Iris Color Picker Tutorial (same principles apply to datepicker)

shareimprove this answer

edited Oct 19 '16 at 15:51

Erenor Paz

1,79422436

answered Feb 27 '14 at 1:40

CChoma

7531720

add a comment

up vote1down vote

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

wp_enqueue_script('jquery-ui-datepicker');

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

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>

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.

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

shareimprove this answer