Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2013-06-11

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?