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.

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.

https://www.hongkiat.com/blog/wordpress-datepicker-theme/