How to Apply jQuery UI Datepicker in WordPress?

Today, We want to share with you wordpress datepicker.In this post we will show you wp datepicker contact form 7, hear for Use WordPress default jQuery UI “datepicker” in your theme we will give you demo and example for implement.In this post, we will learn about jquery datepicker with an example.

Use jquery datepicker in wordpress

First write following simple wordpress source code in template file. These source code will include js as well as datepicker class in the template.

Read Also:  Responsive image gallery with thumbnail carousel Slider wordpress plugin

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 source code in functions.php for date field. Or you can also write this source code in template file.

<?php function display_and_set_custom_date_picker(){ ?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#birth_date').datepicker({
        dateFormat: 'dd-mm-yy'
    });
});
</script>
<?php
} 
// close display_and_set_custom_date_picker() here


//add an action to call display_and_set_custom_date_picker function
add_action('wp_footer','display_and_set_custom_date_picker',10);

and last step to Add Id “birth_date” to input HTML field like below.

 <input id="birth_date" name="birth_date" />

I hope you get an idea about wp custom field-date picker.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  WordPress Remove Yellow BGBOX - donate

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP woocommerce_after_shop_loop_item Examples
  2. Read Also:  Bootstrap Daterangepicker Example
  3. Read Also:  how to insert query in wordpress using wpdb? - Examples
  4. Read Also:  wordpress Get Subcategories List custom PHP pages
  5. Read Also:  How to Limit The Range of Date Picker to Only One year?
  6. Read Also:  Fix 504 Gateway Timeout Nginx Error
  7. Read Also:  How to get current user details in wordpress?
  8. Read Also:  How to upload and activate a WordPress plugin ZIP file?
  9. Read Also:  Bootstrap datepicker example text input with date format
  10. Read Also:  limit excerpt length in wordpress Example
CLOSEX