0

I've created a custom post type metabox which displays and functions fine.

The problem is with the datepicker it just doesn't seem to work, when clicking the metabox youre able to type in it rather than the datepicker appearing.

Just on another note, none of my scripts seem to work although they all load.

Code the loads all scripts.

//Making jQuery Google API
function modify_jquery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');
add_action('admin_init', 'modify_jquery');

/**
 * Enqueue scripts and styles for the front end.
 */
function ge_scripts() {

    // Load our main stylesheet.
    wp_enqueue_style( 'ge-main.style', get_stylesheet_uri() );
    // Enqueue Datepicker + jQuery UI CSS
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_style( 'jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
    // Load Custom Js Effects
    wp_enqueue_script( 'script-js', get_template_directory_uri() . '/bootstrap/js/script.js' );
    wp_enqueue_script( 'datepicker-min-js', get_template_directory_uri() . '/bootstrap/js/datepicker-min.js' );
    // Load the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'ge-ie', get_template_directory_uri() . '/css/ie.css');
    wp_enqueue_style( 'ge-ie', get_template_directory_uri() . '/css/wordpress.css');
    wp_style_add_data( 'ge-ie', 'conditional', 'lt IE 9' );

}
add_action( 'wp_enqueue_scripts', 'ge_scripts' );
add_action( 'admin_init', 'ge_scripts' );

Inside the file datepicker-min.js

jQuery(function($) {
    $( ".event-date-id" ).datepicker({ dateFormat: 'mm/dd/y' });
});

Metabox file for reference

<?php

/**
 * Adds a box to the main column on the Post and Page edit screens.
 */
function getextra_add_meta_boxs() {

    $screens = array( 'events' );

    foreach ( $screens as $screen ) {

        add_meta_box(
            'event metaboxs',
            __( 'Event Date capture', 'workwisewomen' ),
            'event_meta_date_capture_callback',
            $screen
        );
    }
}
add_action( 'add_meta_boxes', 'getextra_add_meta_boxs' );


/**
 * Prints the box content.
 * 
 * @param WP_Post $post The object for the current post/page.
 */
function event_meta_date_capture_callback( $post ) {

    // Add an nonce field so we can check for it later.
    wp_nonce_field( 'event_date_meta', 'event_date_meta_nonce' );

    /*
     * Use get_post_meta() to retrieve an existing value
     * from the database and use the value for the form.
     */
    $value = get_post_meta( $post->ID, '_event_date_meta_key', true );

    echo '<label for="event_date_field">';
    _e( 'Event Time (dd/mm/yy):', 'workwisewomen' );
    echo '</label> ';
    echo '<input type="text" id="event-date-id" class="event-date-id" name="event_date_field" value="' . esc_attr( $value ) . '" size="25" />';
}


/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function getextra_save_meta_box_data( $post_id ) {

    /*
     * We need to verify this came from our screen and with proper authorization,
     * because the save_post action can be triggered at other times.
     */

    // Check if our nonce is set.
    if ( ! isset( $_POST['event_date_meta_nonce'] ) ) {
        return;
    }

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST['event_date_meta_nonce'], 'event_date_meta' ) ) {
        return;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    // Check the user's permissions.
    if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }

    } else {

        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return;
        }
    }

    /* OK, it's safe for us to save the data now. */

    // Make sure that it is set.
    if ( ! isset( $_POST['event_date_field'] ) ) {
        return;
    }

    // Sanitize user input.
    $my_data = sanitize_text_field( $_POST['event_date_field'] );

    // Update the meta field in the database.
    update_post_meta( $post_id, '_event_date_meta_key', $my_data );
}
add_action( 'save_post', 'getextra_save_meta_box_data' );
2
  • Have you used Firebug or similar tool to check for conflicts?
    – MikeGWP
    Dec 3 '14 at 15:42
  • This is a problem in the JS area. Check the console of the browser for a JS conflict. Also it is a good point to switch from class event-date-id to the ID #event-date-id on the $( "#event-date-id" ).datepicker...
    – bueltge
    Dec 3 '14 at 17:02
2

To properly work I didn't write my js file like you. My code will only stand for admin side not the frontend.

In the js enqueue js file (date-picker.js):

jQuery(document).ready(function(){
    jQuery('.ads_datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});

I enqueue my script like this

add_action( 'admin_enqueue_scripts', array($this, 'enqueue_date_picker' ) );

public function enqueue_date_picker(){
    wp_enqueue_script(
        'date-picker-js',
        plugins_url('/js/date_picker.js', __FILE__),
        array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'),
        time(),
        true
    );

    wp_enqueue_style( 'jquery-ui-datepicker' );
    //wp_register_style( 'b-rapid-admin', plugins_url( __FILE__ ) . '/css/date_picker_style.css' );

}

With this js, the id of the input change of course:

public function ads_datetime_start_meta_box(){
    global $post;
    $post_meta = get_post_meta($post->ID);
    ?>
    <input type="date" id="datepicker_start" class="ads_datepicker" name="ads_datetime_start" value="<?php echo $post_meta['ads_datetime_start'][0]; ?>" placeholder=""/>
<?php
}

I think your matter comes from the jQuery(document).ready that is missing.

2
  • IIRC the metabox callback get the post or post id as parameters and there is no real need to use the global Sep 29 '16 at 11:33
  • should be using a class instead of an id
    – Zach Smith
    Jul 27 '17 at 18:11

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