datepicker for custom post type admin

Question

Hey guys im trying to get the jQuery datepicker working for the admin section for a custom post type. Essentially I just want a date and then the ability to store that date in the DB then query the DB to pick things like the month. For now I just want the datepicker ui to start working and then I can work on adding the data to the DB. So i first added a jquery stylesheet and the jqueryui script using the admin_print_styles and admin_enqueue_scripts respectively.

function admin_styles() {
    wp_register_style('jqueryuicss', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css', array('jquery-ui-styles'), '1.12.1');
    wp_enqueue_style('jqueryuicss');
 
}
add_action('admin_print_styles', 'admin_styles');

function admin_scripts() {
    wp_register_script('jqueryui', '//code.jquery.com/ui/1.12.1/jquery-ui.min.js', array('jquery-ui'), '1.12.1', true);
    wp_enqueue_script('jqueryui');
}

add_action('admin_enqueue_scripts', 'admin_scripts');

I then added the metabox to my custom post type.

function 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 post_date_meta_box() {
  add_meta_box('entry_post_date', 'Date', 'post_date_field', 'events', 'side', 'default');
}
add_action('add_meta_boxes', 'post_date_meta_box');

I have a library function that attempts to call the datepicker() in a js library file:

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

The date metabox appears in the edit post section but the jqueryui styles and script dont seem to run at all. Any suggestions on how to get this going? Just to get the scripts and styles registered and enqueued and get the date picker to pop up.

Answer 1

Issues I noticed in your code

• I don't see where/how you're calling that custom datepicker() function and you should use the same admin_enqueue_scripts hook for registering/enqueueing a stylesheet (.css) file.

• You should only load the CSS and JS files on the pages where the styles and scripts are being used, e.g. in your case, the post editing screen for your events post type, where the screen ID is events (the CPT slug).

• $post is not defined in your post_date_field() function — you should've used function post_date_field( $post ).

Making the Datepicker works

1. First, enqueue the CSS and JS files.

   Note: I used the Smoothness theme, but you can just choose whichever you like. I also used the jQuery UI Datepicker library that came bundled in WordPress core where the script handle name is jquery-ui-datepicker.

   function admin_styles() {
       if ( 'events' === get_current_screen()->id ) {
           wp_enqueue_style( 'jquery-ui-smoothness', // wrapped for brevity
               '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css', [], null );
       }
   }
   add_action( 'admin_enqueue_scripts', 'admin_styles' );
   
   function admin_scripts() {
       if ( 'events' === get_current_screen()->id ) {
           wp_enqueue_script( 'your-script', // wrapped for brevity
               '/path/to/your-script.js', [ 'jquery-ui-datepicker' ] );
       }
   }
   add_action( 'admin_enqueue_scripts', 'admin_scripts' );
   

2. Then, apply the Datepicker widget to your custom field.

   Note: I don't use the custom datepicker() function. Instead, I called the Datepicker directly once the document is ready.

   // This code should be in your-script.js.
   
   jQuery( function ( $ ) {
       $( '#jquery-datepicker' ).datepicker();
   } );