implement jquery UI datepicker in wordpress

implement jquery UI datepicker in wordpress

wordpress and jquery both are powerful tool. In plugin we need datepicker sometime. In this article i showed how to implement jquery UI datepicker in wordpress

implement jquery UI datepicker in wordpress

Some WP developers use the plugins to add the datepicker in wordpress. But you can add the Jquery datepicker in wordpress. How can use the Jquery UI in your wordpress theme and plugin using following code.  For adding the datepicker in theme you need to just add the following code in functions.php file.

[viral-lock message=”Some Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


add_action( 'init', 'wpapi_date_picker' );
function wpapi_date_picker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
}

add_action( 'wp_footer', 'wpapi_print_scripts');
function wpapi_print_scripts() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
</script>
    <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
}

[/viral-lock]

For showing the datepicker control in theme or plugin use following code.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>
implement jquery UI datepicker in wordpress
implement jquery UI datepicker in wordpress

If you have any issue for adding the datepicker control then please add comment or email me.

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn

4 thoughts on “implement jquery UI datepicker in wordpress”

  1. Ok i figured out how to make it, just needed to use other selector.

    jQuery(document).ready(function() {
    jQuery(‘input[name*=”date_field”]’).datepicker({
    dateFormat : ‘yy-mm-dd’
    });
    });

    This WILL make ALL fields who have in their name date_field to become fields with Datepicker.

  2. Use custom post type for this and you can use taxonomy as custom field. you need to do the code some for that. you can search in my site for creating custom post type and custom fields with taxonomy. I already written code snippet for this.

  3. I am not sure for which WordPress version this article is written but for WordPress version 3.6 and greater, we can directly use datepicker plugin as it is included by WordPress.

    using following code:

    wp_enqueue_script( ‘jquery-ui-datepicker’ );

Leave a Reply

Your email address will not be published.