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?
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 $
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With