jquery-ui-datepicker的内置样式

11

我想使用网站前端与WordPress捆绑在一起的datepicker。我入队了，jquery-ui-datepicker但datepicker的样式没有设置（控制台中没有js错误）。有对应wp_enqueue_style的吗？

我在 functions.php

function rr_scripts() {
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'jquery-ui-datepicker', array( 'jquery' ) );

  wp_register_style( 'bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
  wp_enqueue_style( 'bootstrap_css' ); # I'm using Twitter Bootstrap as CSS(if it matters)
}
add_action( 'wp_enqueue_scripts', 'rr_scripts' );

— 瑞克什
source

21

据我所知，日期选择器没有样式。您必须注册自己的。代码如下：

function rr_scripts() {
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'jquery-ui-datepicker', array( 'jquery' ) );

  wp_register_style( 'bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
  wp_enqueue_style( 'bootstrap_css' ); // I'm using Twitter Bootstrap as CSS(if it matters)

  wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
  wp_enqueue_style( 'jquery-ui' );   
}

add_action( 'wp_enqueue_scripts', 'rr_scripts' );

— 大卫·宾达
source

+1，但无需注册脚本，然后独立排队。合并为一个，例如：wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );

— random_user_name

我被困在CSS部分，但您过得很愉快。谢谢

— 法兰克（Frank）

4

要加载脚本和样式，请在主题functions.php文件中添加以下代码。

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker');

后端使用脚本：

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('admin_enqueue_scripts', 'add_e2_date_picker');

我必须加入options-general.php才能显示在“设置”->“日期选择器”上。只需将此代码再次放在先前代码下面的functions.php文件中即可。

function register_datepiker_submenu() {
    add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
}

function datepiker_submenu_callback() { ?>

    <div class="wrap">

    <input type="text" class="datepicker" name="datepicker" value=""/>

    </div>

    <script>
    jQuery(function() {
        jQuery( ".datepicker" ).datepicker({
            dateFormat : "dd-mm-yy"
        });
    });
    </script> 

<?php }
add_action('admin_menu', 'register_datepiker_submenu');

?>

请查看有关将jQuery日期选择器添加到WordPress主题或插件的更多详细信息

— 切塞西卜
source