Skip to content

Instantly share code, notes, and snippets.

@rafpro
Forked from thewebprincess/dateform.js
Created October 11, 2018 15:17
Show Gist options
  • Select an option

  • Save rafpro/8458892de87ac8e53669954af8b66fec to your computer and use it in GitHub Desktop.

Select an option

Save rafpro/8458892de87ac8e53669954af8b66fec to your computer and use it in GitHub Desktop.
Gravity Forms - Datepicker extension for Date Range Fields
jQuery(function ($) {
var datepickerInArgs = {
minDate: 1,
defaultDate: 0,
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( dateText, inst ) {
var d = $.datepicker.parseDate( inst.settings.dateFormat, dateText );
d.setDate( d.getDate() + 1 );
$( '.date-out input' )
.val( $.datepicker.formatDate( inst.settings.dateFormat, d ) )
.datepicker( 'option', {
minDate: $.datepicker.formatDate( inst.settings.dateFormat, d )
});
}
},
datepickerOutArgs = {
minDate: 'd',
defaultDate: 'd',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: false,
};
/**
* Reset datepicker fields with new arguments.
*/
function changeDatepickerArgs() {
$( '.date-in input, .date-out input' ).datepicker( 'destroy' );
$( '.date-in input' ).datepicker( datepickerInArgs );
$( '.date-out input' ).datepicker( datepickerOutArgs );
}
$( document ).on( 'gform_post_render', changeDatepickerArgs );
});
//Thanks to Gary Jones https://github.com/garyjones for the code reveiew (and subsequent rewrite)
<?php
//Conditionally Enqueue the Script - not on Admin and only on Contact Page template
// Add CSS class to Gravity Input field for Date Picker
// Requires setting the Description in the forms with default content
add_action('gform_field_css_class', 'twp_custom_input_class', 10, 3);
function twp_custom_input_class($classes, $field, $form){
if($field['description'] == 'Arrival'){
$classes .= " date-in";
}
if($field['description'] == 'Departure'){
$classes .= " date-out";
}
return $classes;
}
/* Restore the Calendar Icon to the Date fields
Positioning will vary according to your styles*/
.page-template-page-contact-php .gfield.date-in .ginput_container,
.page-template-page-contact-php .gfield.date-out .ginput_container{
background: url(http://cyc.org.au/wp-content/plugins/gravityforms/images/calendar.png) no-repeat 41% 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment