jquery-ui-datepicker를위한 내장 스타일

11

웹 사이트의 프런트 엔드에서 WordPress와 함께 제공되는 날짜 선택기를 사용하고 싶습니다. 대기열에 넣었 jquery-ui-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' );

— 리 케시
소스

21

내가 아는 한 datepicker에는 스타일이 없습니다. 당신은 당신의 자신을 등록해야합니다. 코드는 다음과 같습니다.

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

— david.binda
소스

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

?>

WordPress 테마 또는 플러그인에 jQuery 날짜 선택기 추가 에 대한 자세한 내용을 참조하십시오

— 세서 십
소스