0

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.

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();
    } );
    
7
  • Thanks i'll try this out ASAP
    – Zayd Bhyat
    Jun 17 '20 at 7:41
  • No problem, take your time.
    – Sally CJ
    Jun 17 '20 at 8:52
  • 1
    This works as expected. The data is put into the field but for some reason it says I get an error saying jQuery is not defined. I also added $post to the post_date_field. It now looks like this: function post_date_field($post) { echo '<input type="text" id="jquery-datepicker" name="entry_post_date" value="' . get_post_meta( $post->ID, 'entry_post_date', true ) . '">'; I guess the next step is storing this in the DB
    – Zayd Bhyat
    Jun 17 '20 at 18:37
  • 1
    Yes, I believe so - you can use the save_post hook. And sorry about that console error, I made a typo - I used } )();, but the correct one is just } );. :-)
    – Sally CJ
    Jun 18 '20 at 6:15
  • 1
    That's fine, but WordPress has a better version of strip_tags(): sanitize_text_field(). But anyway, we shouldn't discuss about it here - keep a question to one question. :)
    – Sally CJ
    Jun 18 '20 at 6:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.