How to add Date Picker in WordPress

How to install third party plugin in your WordPress site. Today I’m going to tell you how to add date and time picker in your WordPress site. In this tutorial you can learn adding field in WordPress using jQuery UI through which you can create date picker. When adding fields in the WordPress admin area first use the function add_setting_field() to show function output.

Echo the callback function like i create it below..

add_settings_field( ‘example_date_picker’, ‘Example Date Picker’, ‘pu_display_date_picker’, ‘pu_theme_options.php’, ‘pu_date_section’, array() );

 

add_action( ‘admin_enqueue_scripts’, ‘enqueue_date_picker’ );

 

function pu_display_date_picker($args){

     extract( $args );

 

     echo ‘<input type=”date” id=”datepicker” name=”example[datepicker]” value=”” class=”example-datepicker” />’;

}

/**

* Enqueue the date picker

*/

function enqueue_date_picker(){

               wp_enqueue_script(

                                    ‘field-date-js’,

                                    ‘Field_Date.js’,

                                    array(‘jquery’, ‘jquery-ui-core’, ‘jquery-ui-datepicker’),

                                    time(),

                                    true

                        );         

 

                        wp_enqueue_style( ‘jquery-ui-datepicker’ );

}

This code show you the display of function output on admin area in WordPress site. The callback function shows input class of example-date picker in WordPress site. We also have to add admin_enqueue_scripts then we add enqueuer_date_picker it will load a function called Field_date.js which we create later and add jQuery UI and jQuery UI Date picker in your site.

 

After this add this code into Field_date.js file to allow user to use date picker.

 

jQuery(document).ready(function(){

            jQuery(‘.example-datepicker’).datepicker();  

});