I have a form with Gravity Forms in WordPress, this form has 2 datepickers: Check-in date and Check-out Date, but I want that when the costumer selects a date in the check-in date, automatically the check-out date updates with a day after the check-in date, so, this is what i have done with no result:
First I added a function in my functions.php from my theme:
/**
* Gravity Forms Datepicker Changes
*/
function my_scripts_method() {
wp_register_script( 'my-js-file',
get_template_directory_uri() . '/js/my-js.js',
array( 'jquery' ),
'1.0',
false );
wp_enqueue_script( 'my-js-file' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Then I created a folder in my theme called /js and also i created a file called my-js.js, in which I have this code:
jQuery.noConflict();
jQuery(document).ready(function ($)) {
$('#input_7_1').datepicker({
changeMonth: true,
onSelect: function (selectedDate) {
$('#input_7_5').datepicker('option', 'minDate', selectedDate);
}
});
$('#input_7_5').datepicker({
changeMonth: true,
onSelect: function (selectedDate) {
$('#input_7_1').datepicker('option', 'maxDate', selectedDate);
}
});
});
But the problem is that there is no effect in my datepickers, nothing changes, any idea why is this happening?
There is another weird thing, if gravity forms have this file: datepicker.js and if i delete everything there, nothing changes, or if change some value, also there are no changes. this is the code inside that file:
jQuery(document).ready(gformInitDatepicker);
function gformInitDatepicker(){
jQuery('.datepicker').each(
function (){
var element = jQuery(this);
var format = "mm/dd/yy";
if(element.hasClass("mdy"))
format = "mm/dd/yy";
else if(element.hasClass("dmy"))
format = "dd/mm/yy";
else if(element.hasClass("dmy_dash"))
format = "dd-mm-yy";
else if(element.hasClass("dmy_dot"))
format = "dd.mm.yy";
else if(element.hasClass("ymd_slash"))
format = "yy/mm/dd";
else if(element.hasClass("ymd_dash"))
format = "yy-mm-dd";
else if(element.hasClass("ymd_dot"))
format = "yy.mm.dd";
var image = "";
var showOn = "focus";
if(element.hasClass("datepicker_with_icon")){
showOn = "both";
image = jQuery('#gforms_calendar_icon_' + this.id).val();
}
element.datepicker({ yearRange: '-100:+20', minDate: +10, maxDate: "+24M +30D", showOn: showOn, buttonImage: image, buttonImageOnly: true, dateFormat: format, changeMonth: false, changeYear: false, showAnim: 'slideDown', duration: 'slow' }).attr('readonly','readonly');
}
);
}
I realise this is a rather old post, but for those that stumble upon the same issue, the issue doesn’t require such a complex solution – all that was missing was the “refresh:
If you don’t want to fuss with code, I wrote a plugin that will handle this from within the Gravity Forms UI.
http://gravitywiz.com/how-to-restrict-dates-in-second-date-field-based-on-date-selected-in-first-date-field-with-gravity-forms/
You can do it using setDate, see this Fiddle.
i figured out at the end, and i would like to share the solution:
For some reason i wasn´t able to use the code in the way i tried, so the code in functions.php of my theme in wordpress doesn´t work, but i tried with another code inserting this on my page.php of my theme, and it worked, also i had to change every “$” to “jQuery”, so the code worked in that way, this is the code i used:
Hope this help anyone else trying to change something from the jquery datepicker of gravity forms.
Best regards
Your code works and I’m using it on my website, but I had one issue that I found a way to fix it.
The problem was that when you click on the input field the first time, the datepicker shows up just fine. But if you don’t pick a date and click anywhere else on page, when you click on the input field again the datepicker don’t show up anymore. The fix for that was to change the onClose event to onSelect. I’m a noob so I’m don’t know what causes the issue but I got it working now.
Gravity forms documents this scenario and provides a solution. They call it “Datepicker 1 becomes minDate for datepicker 2”. Add some js to your page containing the form: