Skip to content

Instantly share code, notes, and snippets.

@thewebprincess
Last active May 15, 2023 19:33
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save thewebprincess/b6cedb1e70bcc295af10 to your computer and use it in GitHub Desktop.
Save thewebprincess/b6cedb1e70bcc295af10 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%;
}
@StefanLoots
Copy link

Thank you. Thought that's what you were. Thanks for the help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment