How to use the JQuery Date Picker of WordPress

Date Posted: April 26, 2014, 11:34 am


date-picker-jquery-ui

It would be nice to have a pop-up date picker for your input fields that requires date inputs rather than letting your users just type-in the whole date which becomes very tiring. So on this tutorial, I am going to show you how you can use the date-picker of WordPress on your front-end forms.

The first thing we need to do is to enqueue the necessary scripts to our wp_head() function

1
2
3
4
5
6
add_action('wp_head', 'cvf_ps_enqueue_datepicker');
function cvf_ps_enqueue_datepicker() {
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
   
}

To call the date picker, simply append the script to your form and to define a unique html class or id to identify your target text field (in my case, I created a unique class “date_picker”)

1
2
3
4
5
6
7
8
9
<label for="reg_DateOfBirth"><?php _e('Date Of Birth (MM/DD/YYYY)'); ?></label><br />                          
<input type="text" name="DateOfBirth" class="form-control date_picker" value="<?php cvf_ps_retrieve_input('DateOfBirth'); ?>" />
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.date_picker').datepicker({
            dateFormat : 'mm/dd/yy'
        });
    });
</script>

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me