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.

Advertisements

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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s