Jquery-ui-datepicker के लिए इनबिल्ट स्टाइल

11

मैं एक वेबसाइट के सामने के छोर पर वर्डप्रेस के साथ बंडल किया गया डेटपिकर का उपयोग करना चाहता हूं। मैंने कल्पना की jquery-ui-datepickerलेकिन डेटकाइपर स्टाइल नहीं किया गया है (कंसोल में कोई जेएस त्रुटि नहीं है)। क्या इसके लिए कोई संगत 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' );

— RRikesh
स्रोत

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

— david.binda
स्रोत

+1 लेकिन स्क्रिप्ट को पंजीकृत करने की आवश्यकता नहीं है और फिर इसे स्वतंत्र रूप से संलग्न करें। एक एकल में संयोजित करें, जैसे:wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );

— random_user_name

मैं सीएसएस भाग पर अटक गया था लेकिन आपने मेरा दिन बना दिया। धन्यवाद

— फ्रैंक

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 दिनांक बीनने वाले पर अधिक विवरण देखें

— csehasib
स्रोत