20 December 2023

How to Add jQuery UI Datepicker in WordPress

By Ronald Smith

WordPress has gone through significant changes, especially in the admin User Interface (UI) theme, starting from version 3.8. The new WordPress admin UI has a more modern look, with gradients and shadows removed. This is great news, but if you have a custom theme or plugin with a customized UI, it may need some updating.

Let’s take the example of adding a Date Picker to the post editing screen. If you’ve done this before, you might have noticed that the calendar’s interface doesn’t quite fit in with the new WordPress admin theme.

If you’re facing the same issue, don’t worry. In this article, I’ll show you how to adjust the Date Picker to make it look more cohesive with the latest WordPress admin theme.

Adding jQuery

Before we get started, let me explain how I added the Date Picker to the WordPress post area in the example you saw earlier.

To get started, let’s load the jQuery UI script and styles in the WordPress admin screen. All you need to do is add the following codes to 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’);

Once that’s done, we can add a Meta Box that will display the calendar. It’s quite simple.

function hkdc_post_date_field() {

echo ‘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’);

And that’s it! You’ve successfully added the jQuery UI script and styles, as well as a Meta Box for the calendar. Now you can easily incorporate a date picker in your WordPress admin screen. Happy coding!

After you add the lines mentioned above, a new meta box will appear in your WordPress post-editing screen, complete with an input field. But don’t expect anything to happen just yet. Before we can see any action, we need to activate the jQuery Date Picker for the input field.

To do this, follow these steps:

1. Create a JavaScript file called “admin.js” and save it in a folder named “js”.

2. Inside the “admin.js” file, add the following lines of code:

“`

(function($) {

$(‘#jquery-datepicker’).datepicker();

})(jQuery);

“`

3. Next, locate the line that says `wp_enqueue_script( ‘jquery-ui-datepicker’ );` and add the following line of code right below it:

“`

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

“`

That’s it! Now you should have the jQuery Date Picker working smoothly in your WordPress post-editing screen.

Now, when you click on the new input field, you should see a pop-up called the Data Picker. Remember, this is just for show – the input field doesn’t actually work yet. Clicking the Update button won’t send the data to the database.

But don’t worry, we can get it working with a few more lines of code. This code will help you get started.

Let’s talk about adding a new Date Picker theme. The theme we’ll use was created by X-Team Developers. It offers eight different color schemes for the WordPress admin area: Fresh, Light, Blue, Coffee, Ectoplasm, Midnight, Ocean, and Sunrise. You can also customize the theme easily since it comes in LESS and Sass formats.

How to Add jQuery UI Datepicker in WordPress

I’m going to walk you through the necessary steps to download the source from its Github repository. First, copy the CSS stylesheet and save it in the “css” directory of your theme. Then, add this line of code within the hkdc_admin_styles function to load the stylesheet in the WordPress admin screen:

“`html

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

“`

That’s it! Now, take a look below to see how the theme matches the WordPress “Default” admin theme. It will automatically change to match the theme selected by the user.

How to Add jQuery UI Datepicker in WordPress

My Closing Idea

From what I’ve learned, crafting your own unique design for the jQuery date picker can feel overwhelming. But you’re in luck! The talented developers at X-Team have already done all the heavy lifting for you. By including this stylesheet, you’ll have everything you need to create a theme or plugin that seamlessly integrates the jQuery UI Date Picker.