web-dev-qa-db-fra.com

Utilisez jquery datepicker dans wordpress

Je veux datepicker à qui dans un formulaire dans ma page de modèle wordpress, mais cela ne fonctionne pas.

Voici le code que j'ai le thème enfant functions.php:

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

Ensuite, j'ai ceci dans page-mypage.php:

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

Mais ça ne se voit pas. Pourriez-vous m'aider à comprendre ce qui ne va pas?

javascriptphpjquerywordpressdatepicker
13
testermaster

Le code que vous utilisez pour charger jQuery n'est pas valide et vous ne chargez pas du tout datepicker (jQuery UI Datepicker). J'ai posté quelques réponses concernant la bonne façon d'utiliser jQuery dans WordPress donc je vais fournir un exemple de travail et puis un lien si vous souhaitez en savoir plus.

Remplacez le code que vous avez inséré dans votre thème enfant functions.php par:

/**
 * 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 the jQuery UI CSS on a CDN.
    wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css' );
    wp_enqueue_style( 'jquery-ui' );  
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );

Remplacez enfin votre utilisation par:

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

jquery nécessite le Word Jquery au lieu de $

47
Nathan Dawson

Pour charger le script et le style du soufflet, ajoutez le code du soufflet dans le fichier theme functions.php.

Script pour une utilisation frontale 

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 pour une utilisation 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');

Il suffit de mettre ce code également dans le fichier funtions.php ou sous ce code.

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

Après avoir ajouté ce code, vous aurez un sélecteur de date sur Admin Menu-> Settigns-> Date Picker .

Veuillez voir les détails sur Ajouter un jQuery DatePicker à WordPress Thème ou Plugin

6
csehasib