将jQuery日期选择器添加到自定义发布类型Metabox

时间:2014-12-03 作者:dannyw24

我已经创建了一个自定义的post类型元数据库,它可以很好地显示和运行。

问题在于日期选择器似乎不起作用,当单击元框时,您可以输入它,而不是出现日期选择器。

另一方面,我的脚本似乎都无法工作,尽管它们都已加载。

编写加载所有脚本的代码。

//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\' );
在文件datepicker-min.js中

jQuery(function($) {
    $( ".event-date-id" ).datepicker({ dateFormat: \'mm/dd/y\' });
});
供参考的Metabox文件

<?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\' );

1 个回复
SO网友:Benoti

为了正常工作,我没有像你那样编写js文件。我的代码只代表管理端,而不是前端。

在js enqueue js文件(date picker.js)中:

jQuery(document).ready(function(){
    jQuery(\'.ads_datepicker\').datepicker({ dateFormat: \'yy-mm-dd\' });
});
我像这样将脚本排队

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\' );

}
有了这个js,输入的id当然会改变:

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
}
我认为你的问题来自jQuery(文档)。缺少的准备就绪。

结束