How to limit date range in gravity forms WordPress
- SOLVED
Hi,
Using gravity forms WP plugin version 1.7.2
I need to use the date picker to limit the date range a user is able to select to equal today + 1.
In other words, given today's date the date picker should display tomorrow's date and not allow the user to select dates earlier.
Thanks.
Answers (1)
Kyle answers:
You will need to add some custom script to your header or footer:
<script>
jQuery(document).ready(gformInitDatepicker);
function gformInitDatepicker(){
jQuery('.datepicker').each(
element.datepicker({
minDate: +2,
maxDate: +548
})
}
</script>
nepatriot comments:
Thanks for the reply Kyle.
After inserting the code above into the header section of my site I am still able to select dates of any range I want. When looking at the console I see the following error:
Uncaught SyntaxError: Unexpected token }
Kyle comments:
Ah I think there is a typo with my code, try this, its simpler and allows you to set the Form ID so you can target which one it applies to:
jQuery(document).ready(function($){
$( "#field_6_3" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
Replace 'field_6_3' with the appropriate ID of your input li
nepatriot comments:
I'm probably doing something wrong... but I pasted the following code into my header:
<script>
jQuery(document).ready(function($){
$( "#field_5_21" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
And I can still input any dates I want... you can see the page: http://laundryz.com/product/teele-square-laundromat-copy/
The field I want to restrict is pickup date...
Kyle comments:
Hmm that's strange, I'll rewrite something
Did you try using the plugin: http://www.smartredfox.com/2013/05/gravity-forms-limited-date-field/
Kyle comments:
Okay, I tested this and it worked for me. Add the noconflict line and target the input instead of the field
jQuery.noConflict();
jQuery(document).ready(function($) {
$( "#input_6_3-0" ).datepicker({ minDate: '+1d' });
});
nepatriot comments:
That works, but it also drops my my calendar icon... any ideas?
Kyle comments:
Yeah, you just have to add that in too, you will have to correct the file path to the image though:
jQuery.noConflict();
jQuery(document).ready(function($) {
$( "#input_6_3-0" ).datepicker({ buttonImage: 'images/calendar.gif', minDate: '+1d' });
});
Kyle comments:
Did you get this to work?