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 mo         


        

Answer 1

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 $

Answer 2

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