How to use the JQuery Date Picker of WordPress
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> |
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me
