Feb.21

Enabling Date picker in WordPress form

Enabling Date picker in WordPress form

The Date picker is user calender plugin used to display date as graphical view.  The date picker library have different types of functionality and parameter to display the date setting. Min date max date, date range, start date end date (with grater than start date).

So we already have the date picker library in wordpress. We just need to enable the library and function to show the date picker in required places.

We need to include these library stylish and jquery.

/* Include the jquery and Style sheet for the date picker */

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’);

The Includes jQuery function html structure and Id of the content which we need to make date picker enabled.

<script>

jQuery(document).ready(function() {
jQuery(‘#startDate’).datepicker({
dateFormat : ‘yy-mm-dd’,

/* dateFormat:  0 date format year months and day */
minDate:  0

/* minDate:  0 It display only the date above system date */
});

jQuery(‘#endDate’).datepicker({
dateFormat : ‘yy-mm-dd’,
beforeShow : function(){
jQuery( this ).datepicker(‘option’,’minDate’, jQuery(‘#startDate’).val() );

/*The beforeShow: it created before enable datepicker and this date picker value starts from the StartDate value (It confirms the end date must be grater than start date )*/
}
});
});

</script>

Html Structure of Form which is used to display the input fields.

<table>
<tr>
<th><label for=”youtube”></label></th>
<td> </td>
</tr>
<tr>
<th><label for=”subscription_from”>Subscription From </label></th>
<td><input type=”text” id=”startDate” name=”subscription_from” id=”youtube” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_from’, $user->ID ) ); ?>” /> Year-Months-Day<br />
</td>
</tr>
<tr>
<th><label for=”subscription_to”>Subscription Till </label></th>
<td><input type=”text” id=”endDate” name=”subscription_to” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_to’, $user->ID ) ); ?>”/> Year-Months-Day<br />
</td>
</tr>
<tr>
<th><label for=”subscription_cost”>Subscription Cost </label></th>
<td><input type=”text” name=”subscription_cost” id=”subscription_cost” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_cost’, $user->ID ) ); ?>” /><br />
</td>
</tr>
</table>

 

 

 

Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Facebook Comment