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.

50 CSS Tequniqe and Tips every web developer should check

Many Developer want to do work in CSS. Web Developer has special value for CSS. Since CSS 2.0 and CSS 3.0 came many techniques and Tricks invented by Web developers. Here I am giving you some list of CSS Tips. You can found following links very useful and powerful for your website while developing your website.

50 CSS Tequniqe and Tips every web developer should check

50 CSS Tequniqe and Tips every web developer should check
50 CSS Tequniqe and Tips every web developer should check
  • Multiple Columns
  • Multiple Backgrounds
  • Creating A Realistic Looking Button With CSS3
  • 56. A Crash Course In Advanced CSS3 Effects