Gravity Forms: How to Restrict a DatePicker Date Range

By default the Gravity Forms date picker has a date range of -100 years to +20 years.

Sometimes you might need to limit that date range.

For example, a Date of Birth field can never be after today’s date.  And a requested appointment date can’t be in the past.

There is some easy code to restrict the date range shown in the date picker.

Note:  The article applies to using a datepicker, not a date drop down date field in Gravity Forms.

datepicker

Steps to Limit the Date Range

  1. After you have inserted your Date field, insert a HTML field somewhere on the form.  I prefer to put it right beside the date picker for easy reference.  Change the title of the HTML field to something descriptive to help you easily identify it – e.g. “Script to restrict dates”.  Remember, this title doesn’t appear on the front end for users to see.  It’s just for you.
  2. Identify the form ID and field number of the date picker.  The easiest way to do this is to preview (or view) the form.  Right click in the date picker field and choose “Inspect Element”.  Look for the ID of field.
    e.g. in this example the ID is “input_4_46”.
    datepicker_html_inputIDThis tells us that the form ID is 4 and the field ID is 46.
  3. Copy the code below.  Firstly edit the Form ID and field ID to match the field of your date picker.
  4. Edit the code as needed to suit your desired date range.
  5. Paste your edited code into the HTML field on the form.
  6. Update the form, and the date picker will now be restricting the dates for you.

The Code

Maximum Date = Today.  Minimum Date = 10 years ago

In this example the minimum date is set as 10 years ago:  -10 Y

The maximum date is set to today: 0


<script type="text/javascript">

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {

if ( formId == 1 && fieldId == 2 ) {
optionsObj.minDate = '-10 Y';
optionsObj.maxDate = 0;

}
return optionsObj;
} );

</script>
 

Dates Must Be in the Next Two Weeks

To limit the dates to only be today or the next two weeks, the code would be this:


<script type="text/javascript">

 gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {

 if ( formId == 1 && fieldId == 3 ) {
 optionsObj.minDate = 0;
 optionsObj.maxDate = '+2 W';
 
 }
 return optionsObj;
 } );

</script>

Date range from 10 Days Ago to 1 month away

Days are represented without a letter.  Months use the letter ‘M’, as shown in this example:


<script type="text/javascript">

 gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {

 if ( formId == 1 && fieldId == 4 ) {
 optionsObj.minDate = '-10';
 optionsObj.maxDate = '+1 M';
 
 }
 return optionsObj;
 } );

</script>

Live Demo

So that is how to restrict the range of dates available in the date picker easily in Gravity Forms.

There are many more complex ways to use this gform_datepicker_options_pre_init filter. For complex examples see the Gravity Forms documentation page.

If you have found this article useful, please leave a comment below.

  • jemszjemsz

    Great dude! Thanks for the script

  • Erik Teichmann

    If anyone else is looking, I found the following to work for setting a particular date:

    optionsObj.maxDate = ’12/31/2016′;

    I imagine it might be tied to the date format you’ve chosen in the forms admin.

  • Mohamed Afzal Mulla

    Great script, any idea how i can block off saturdays and sundays aka weekends ?

  • Vrajesh

    Thanks..working great..

  • Gwindylyn

    Did this little hack stop working recently? I tried using it today and it did not work . . .

    • Josh Moore

      Hi. It should still work. Can you please specify exactly what happened when you tried it?

  • David

    Hi,
    thanks for the valuable post.

    I am trying to get some similar options you have used like default date with datepicker in gform and restrictive range that will work together.

    I am wandering that is it possible with functions.php or someother way like in your blog post to use

    1. range and default value in datepicker based on other field e.g. dropdown value

    Main issue is that my dropdown value have wide range say value 1 to 300.

    Can it work like below:

    1. For dropdown value 1 to 10, show datepicker range 2 days to 7 days from current date and show default value to 5 days from current day

    2. Dropdown value 11 to 25, show datepicker range 3 days to 10 days and default value to 7 days from current date.

    I am looking to get any help or suggestion on above.

    David

    • Josh Moore

      Hi David. It sounds like you’ll need to put the javascript code I’ve shown above inside an onchange() event for the dropdown. I havne’t tested it so I’m not sure if it’s possible, but hopefully that points you in the right direction!

  • Ali Bell

    Hi! Thanks for this code. Is there a way to make this code effect more than one field?
    I would like to limit the date span (Im using the date as suggested by Erik which seems to work well) on multiple date fields.

    I tried just adding a comma and the next field ID after ( 1,3,8) but it didnt work. Any ideas?

    Thanks in advance.

    • Ali Bell

      Sorry, fixed it. I was missing a space after the comma for each field ID. My working code is:

      gform.addFilter( ‘gform_datepicker_options_pre_init’, function( optionsObj, formId, fieldId ) {

      if ( formId == 10 && fieldId == 1, 3, 8 ) {
      optionsObj.minDate = ’19/11/2016′;
      optionsObj.maxDate = ‘6/12/2016’;

      }
      return optionsObj;
      } );

  • Mansi Goel

    i am recieving this error gform is not defined on adding below code . please help

    gform.addFilter( ‘gform_datepicker_options_pre_init’, function( optionsObj, formId, fieldId ) {

    if ( formId == 10 && fieldId == 1, 3, 8 ) {
    optionsObj.minDate = ’19/11/2016′;
    optionsObj.maxDate = ‘6/12/2016’;

    }
    return optionsObj;
    } );

    • Josh Moore

      Are you sure you’re using Gravity Forms? If so, I’m not sure why you’d be getting that error. I suggest logging a support request with Gravity Forms.

  • John Whaley

    Josh, is there a way to have this code block out the mindate for today at a certain time?

    gform.addFilter( ‘gform_datepicker_options_pre_init’, function( optionsObj, formId, fieldId ) {
    if ( formId == 1 && fieldId == 3 ) {
    optionsObj.minDate = 0;
    optionsObj.maxDate = ‘+2 W’;

    }
    return optionsObj;
    } );

  • Thank you Josh you saved me a lot of time (no pun intended).

  • Super helpful, thanks Josh!

  • Sam Bean

    How can I restrict the time frame AND turn off Sundays?

Powered by WordPress. Designed by Woo Themes