我已经创建了一个自定义的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\' );
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(文档)。缺少的准备就绪。