First write following code in template file. These code will include js and datepicker class in the template.
wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-datepicker'); wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
Write following php code in functions.php for date field. Or you can also write this code in template file.
<?php function add_datepicker_in_footer(){ ?> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#date').datepicker({ dateFormat: 'dd-mm-yy' }); }); </script> <?php } // close add_datepicker_in_footer() here //add an action to call add_datepicker_in_footer function add_action('wp_footer','add_datepicker_in_footer',10);
Add Id “date” to input field.
<input id="date" name="date" />
That’s it. Refresh the page and you will see datepicker when you click on date field.
Also, you need to include jquery ui css stylesheet file… use the following code…
wp_enqueue_style(‘jquery-ui-css’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’);
thanks, code added
Hi i tried this but i am not getting the result
Hi, thanks for using this code , I guess there will be jquery conflict in your code. Please use firebug to find js conflict.
Not work for me. No conclift or js errors. Check you code.
Hi Anton, I update code , please try this
Thanks, its work! Please no use image as text, can`t copypaste code.
Better insert this
function add_datapicker() {
?>
jQuery(document).ready(function() {
jQuery(‘#date’).datepicker ({
dateFormat: ‘dd-mm-yy’
});
});
<?php
}
add_action ('wp_footer', 'add_datapicker');
Thanks a lot for the post. It helped me 🙂
Welcome Dhara,
you can also use other jQuery ui using same method.
Hi! where is the “template file”?
Hi , template files are present in your theme folder for example “wp-content/themes/your-current-used-theme-folder/templatefile.php”
Very Good, easy 🙂