Use jquery datepicker in wordpress

Question

I want a datepicker who is in the form on my Wordpress template page, but it does not work.

This is the code in which I have a functions.php child theme:

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 have this on mypage.php:

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

But it is not shown. Could you help me pout what is wrong?

Answer 1

The code you use to download jQuery is invalid and you are not loading datepicker (jQuery UI Datepicker) at all. I posted some answers regarding the proper use of jQuery in WordPress, so I will give a working example and then a link if you want to read more.

Replace the code you inserted into your child functions.php theme 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 Google 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' ); 

Finally, replace your use with:

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

jquery requires jQuery instead of $

Answer 2

To load the script bellows and style, add the bellows code to the theme's functions.php file.

Script for external 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 background 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 in the funtions.php file or below this 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 will have the opportunity to select a date in the Admin Menu-> Settigns-> Date Picker .

For more, see Add jQuery DatePicker to a WordPress Theme or Plugin.