Use jquery datepicker in wordpress

Question

I want datepicker to who in a form in my wordpress template page, but it doesn't work.

This is the code I've the child theme 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');

Then I've this in page-mypage.php:

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

But it doesn't show. Could you help me to wind what's wrong?

Your jQuery URL looks wrong (you have `ajax.googleapis.com/ajax.googleapis.com`). Have you included `datepicker()` anywhere? I think it's part of jQuery UI, not base jQuery — Hobo, Dec 13 '14 at 20:51
@Hobo Thanks for your reply, I've added jQueryi UI as showed in first post, but still it doesn't work, — testermaster, Dec 13 '14 at 21:13

Nathan Dawson · Accepted Answer · 2019-08-11T05:44:50.140

58

The code you're using to load jQuery is invalid and you aren't loading datepicker (jQuery UI Datepicker) at all. I've posted a few answers regarding the correct way to use jQuery in WordPress so I'll provide a working example and then a link if you'd like to read more.

Replace the code you've inserted into your child theme functions.php with:

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

Finally replace your usage with:

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

jquery requires the word Jquery instead of $

edited Aug 11 '19 at 05:44

answered Dec 13 '14 at 21:13

Nathan Dawson

18,138
3
52
58

it's starting to work, thank you! Now I see the calendar on trasparent background. How to have the default layout like here? http://jqueryui.com/datepicker/#default – testermaster Dec 13 '14 at 21:21
I've gone ahead and updated my answer to include details regarding loading the jQuery UI stylesheet. – Nathan Dawson Dec 13 '14 at 21:21
I've tested your update, cleared the cache, but still transparent background. Thanks for your patience. – testermaster Dec 13 '14 at 21:24
My apologies, I should have checked the CSS file first. Please retry with the updated link. – Nathan Dawson Dec 13 '14 at 21:26
1

Google hosted theme also: https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css from: https://developers.google.com/speed/libraries/#jquery-ui – Jake Nov 10 '16 at 20:59
Master - save me a lot time :) – Nuno Sarmento Feb 18 '18 at 13:17

score 8 · Answer 2 · edited Nov 01 '16 at 19:28

For loading bellows script & style add bellows code on theme functions.php file.

Script for front-end use

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 for back-end use

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

Just put this code also funtions.php file or bellow those 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');
?>

After adding this code, you’ll got a date picker on Admin Menu->Settigns->Date Picker.

Please see details on Add a jQuery DatePicker to WordPress Theme or Plugin

score 0 · Answer 3 · answered Oct 20 '22 at 13:58

A more easy solution would be:

add_action('wp_enqueue_scripts', 'myScripts');
function myScripts()
{
    wp_enqueue_script('my_script', script.js', array('jquery', 'jquery-ui-datepicker'));
}

And the script.js file would have:

jQuery(document).ready(function () {
    jQuery('#datepicker').datepicker();
});

Use jquery datepicker in wordpress

3 Answers3

Linked