Last active
May 15, 2023 19:33
-
-
Save thewebprincess/b6cedb1e70bcc295af10 to your computer and use it in GitHub Desktop.
Gravity Forms - Datepicker extension for Date Range Fields
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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%; | |
} |
It is a date range - will select the days in between.
Should i just use the HTML field in the form or should i use the java script too. where should i implement the .js?
Thank you
If you don't get whats going on there you should probably hire a developer.
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
I have a question, please. I am using the Gravity Wizz Inventory plugin for products. Will this snippet select just the start and end date or all days in between as well and would it work with Inventory? I need to be able to assign products to multiple days, not just 1st and last.
Thank you so much. Great work