How to Apply jQuery UI Datepicker in WordPress

WordPress has changed a lot since version 3.8, especially the admin UI theme. Following the masses, the WordPress admin UI now looks flatter, removed of gradients and shadows. It means, if you have a built theme or plugin that used a customized UI, it is time for a makeover.

As an example, here I have added Data Picker in the post editing screen. And as you can see below the calendar’s UI seems a bit out of place.

If you hae the same problem, follow this article as we are going to show you how to adjust this to make your customized UI look more unified with the latest WordPress admin theme.

Recommended Reading: Customizing And Theming JQuery UI Datepicker

Adding jQuery

Before proceeding, first let me show you how I added Date Picker in the WordPress post area like what you’ve seen above.

To begin, we load the jQuery UI script and styles in WordPress admin screen. Add these codes below in your theme’s functions.php file.

function hkdc_admin_styles() {
	wp_enqueue_style( 'jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
}
add_action('admin_print_styles', 'hkdc_admin_styles');
function hkdc_admin_scripts() {
	wp_enqueue_script( 'jquery-ui-datepicker' );
}
add_action('admin_enqueue_scripts', 'hkdc_admin_scripts');

Then we add a Meta Box that will show the calendar.

function hkdc_post_date_field() {
	 echo '<input type="text" id="jquery-datepicker" name="entry_post_date" value="' . get_post_meta( $post->ID, 'entry_post_date', true ) . '">';
}
function hkdc_post_date_meta_box() {
	add_meta_box('entry_post_date', 'Date', 'hkdc_post_date_field', 'post', 'side', 'default');
}
add_action('add_meta_boxes', 'hkdc_post_date_meta_box');

After adding the lines above, a new meta box along with an input field should appear in your WordPress post-editing screen. But nothing will yet to happen, as we have to initiate the jQuery Date Picker to the input field.

So let’s create a new JavaScript file named admin.js, and add the following JavaScript codes. Save it in a folder named js.

(function($) {
	$('#jquery-datepicker').datepicker();
}(jQuery));

Then add the following line under wp_enqueue_script( 'jquery-ui-datepicker' ); to load the admin.js.

wp_enqueue_script( 'wp-jquery-date-picker', get_template_directory_uri() . '/js/admin.js' );

You should now see the Data Picker pop up when you put the cursor in the new input field. Please note that this is merely for demonstration. The new input field is not fully functioning yet; the input will not pass the data to the database yet when you click the Update button.

You will be needing some more codes to make that happen. But, at least, this code could help you get started.

Adding a new Date Picker theme

This Date Picker theme we are going to use is developed by X-Team Developers. It comes with eight WordPress admin color scheme namely Fresh, Light, Blue, Coffee, Ectoplasm, Midnight, Ocean, and Sunrise (do check out our previous post, Customize WordPress Admin Color Scheme). It also comes LESS and Sass format which makes it easily customizable.

You can download the source from its Github repository. Copy the CSS stylesheet and put it in the css directory of your theme. Then, add this line below within the hkdc_admin_styles to load the stylesheet in the WordPress admin screen.

wp_enqueue_style('wp-jquery-ui-datepicker', get_template_directory_uri() . '/css/datepicker.css');

That’s it. Now, as you can see below, the theme matches WordPress “Default” admin theme. It will change accordingly to the user’s selected theme.

Final Thought

In my experience, creating a customised theme for jQuery date picker could be really daunting. Thankfully, the X-Team developers have done all the hardwork for you. This stylesheet is a must to include if you build a theme or a plugin that incorporates jQuery UI Date Picker.