Use WordPress default jQuery UI “datepicker” in your theme


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.

Published by PHP Technology Tutorials

PHP Developer

12 thoughts on “Use WordPress default jQuery UI “datepicker” in your theme

  1. 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’);

    1. Hi, thanks for using this code , I guess there will be jquery conflict in your code. Please use firebug to find js conflict.

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

    1. Hi , template files are present in your theme folder for example “wp-content/themes/your-current-used-theme-folder/templatefile.php”

Leave a comment