2014-12-13 2 views
6

Desidero datidore a chi in un modulo nella mia pagina di modello wordpress, ma non funziona.Utilizzare jquery datepicker in wordpress

Questo è il codice che ho il functions.php tema bambino:

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', 'http://ajax.googleapis.com/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, '2.1.1'); 
     wp_enqueue_script('jquery'); 
    } 
} 
add_action('init', 'modify_jquery'); 
function load_jquery_ui_google_cdn() { 
    global $wp_scripts; 

    wp_enqueue_script('jquery-ui-core'); 
    wp_enqueue_script('jquery-ui-slider'); 

    // get the jquery ui object 
    $queryui = $wp_scripts->query('jquery-ui-core'); 

    // load the jquery ui theme 
    $urlui = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"; 
    wp_enqueue_style('jquery-ui-smoothness', $urlui, false, null); 
} 

add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn'); 

Poi ho questo page-mypage.php:

   <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
       </script> 
...other code... 
Date: <input type="text" id="datepicker"> 
...other code... 
     </form> 

Ma non mostra . Potresti aiutarmi a capire cosa c'è che non va?

+0

L'URL di jQuery sembra sbagliato (si hanno 'ajax.googleapis.com/ajax.googleapis.com'). Hai inserito 'datepicker()' ovunque? Penso che sia parte dell'interfaccia utente di jQuery, non di base jQuery – Hobo

+0

@Hobo Grazie per la tua risposta, ho aggiunto l'interfaccia utente di jQueryi come mostrato nel primo post, ma ancora non funziona, – testermaster

risposta

23

Il codice che si sta utilizzando per caricare jQuery non è valido e non si sta caricando datepicker (jQuery UI Datepicker). Ho pubblicato alcune risposte riguardo al modo corretto di utilizzare jQuery in WordPress, quindi fornirò un esempio funzionante e un link per ulteriori informazioni.

Sostituire il codice che avete inserito nel vostro bambino tema functions.php con:

/** 
* Load jQuery datepicker. 
* 
* By using the correct hook you don't need to check `is_admin()` first. 
* If jQuery hasn't already been loaded it will be when we request the 
* datepicker script. 
*/ 
function wpse_enqueue_datepicker() { 
    // Load the datepicker script (pre-registered in WordPress). 
    wp_enqueue_script('jquery-ui-datepicker'); 

    // You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS. 
    wp_register_style('jquery-ui', 'http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css'); 
    wp_enqueue_style('jquery-ui'); 
} 
add_action('wp_enqueue_scripts', 'wpse_enqueue_datepicker'); 

Infine sostituire l'uso con:

<script> 
    jQuery(document).ready(function($) { 
     $("#datepicker").datepicker(); 
    }); 
</script> 

jquery requires the word Jquery instead of $

+0

sta iniziando a funzionare, grazie! Ora vedo il calendario su sfondo trasparente. Come avere il layout predefinito come qui? http://jqueryui.com/datepicker/#default – testermaster

+0

Sono andato avanti e ho aggiornato la mia risposta per includere dettagli sul caricamento del foglio di stile dell'interfaccia utente jQuery. –

+0

Ho testato l'aggiornamento, svuotato la cache, ma ancora sfondo trasparente. Grazie per la vostra pazienza. – testermaster

1

per scaricatore di script & lo stile aggiunge codice a soffietto sul file functions.php del tema.

Script per l'utilizzo front-end

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

Script per l'uso di back-end

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

Basta inserire questo codice anche file di funtions.php o nitrite coloro codice.

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

Dopo l'aggiunta di questo codice, avrete ottenuto un selettore data in Admin Menu-> Settigns-> Date Picker.

Si prega di consultare i dettagli su Add a jQuery DatePicker to WordPress Theme or Plugin