![\"datepicker\"](\"https:\/\/nz.blog.geektactics.co.nz\/geektamin\/wp-content\/uploads\/sites\/2\/2015\/06\/datepicker.png\")
<\/p>\n
Steps to Limit the Date Range<\/h2>\n\n- After you have inserted your Date field, insert\u00a0a HTML field somewhere on the form. \u00a0I prefer to put it right beside the date picker for easy reference. \u00a0Change the title of the HTML field to something descriptive to help you easily identify it – e.g. “Script\u00a0to restrict dates”. \u00a0Remember, this title doesn’t appear on the front end for users to see. \u00a0It’s just for you.<\/li>\n
- Identify the form ID and field number of the date picker. \u00a0The easiest way to do this is to preview (or view) the form. \u00a0Right click in the date picker field and choose “Inspect Element”. \u00a0Look for the ID of field.
\ne.g. in this example the ID is “input_4_46”.
\n![\"datepicker_html_inputID\"](\"https:\/\/nz.blog.geektactics.co.nz\/geektamin\/wp-content\/uploads\/sites\/2\/2015\/06\/datepicker_html_inputID.png\")
This tells us that the form ID is 4 and the field ID is 46.<\/li>\n - Copy the code below. \u00a0Firstly edit the Form ID and field ID to match the field of your date picker.<\/li>\n
- Edit the code as needed to suit your desired date range.<\/li>\n
- Paste your edited code into the HTML field on the form.<\/li>\n
- Update the form, and the date picker\u00a0will now be restricting the dates for you.<\/li>\n<\/ol>\n
The Code<\/h2>\nMaximum Date = Today. \u00a0Minimum Date = 10 years ago<\/h3>\n
In this example the minimum date is set as 10 years ago: \u00a0-10 Y<\/p>\n
The maximum date is set to today: 0<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\ngform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\nif ( formId == 1 && fieldId == 2 ) {\r\noptionsObj.minDate = '-10 Y';\r\noptionsObj.maxDate = 0;\r\n\r\n}\r\nreturn optionsObj;\r\n} );\r\n\r\n<\/script>\r\n <\/code><\/pre>\nDates Must Be in the Next Two Weeks<\/h3>\n
To limit the dates to only be today or the next two weeks, the code would be this:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\n gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\n if ( formId == 1 && fieldId == 3 ) {\r\n optionsObj.minDate = 0;\r\n optionsObj.maxDate = '+2 W';\r\n \r\n }\r\n return optionsObj;\r\n } );\r\n\r\n<\/script>\r\n\r\n<\/code><\/pre>\nDate range from 10 Days Ago to 1 month away<\/h3>\n
Days are represented without a letter. \u00a0Months use the letter ‘M’, as shown in this example:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\n gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\n if ( formId == 1 && fieldId == 4 ) {\r\n optionsObj.minDate = '-10';\r\n optionsObj.maxDate = '+1 M';\r\n \r\n }\r\n return optionsObj;\r\n } );\r\n\r\n<\/script>\r\n\r\n<\/code><\/pre>\nLive Demo<\/h2>\n
[gravityform id=”1″ title=”true” description=”false”]<\/p>\n
So that is how to restrict the range of dates available in the date picker easily in Gravity Forms.<\/p>\n
\ne.g. in this example the ID is “input_4_46”.
\n
This tells us that the form ID is 4 and the field ID is 46.<\/li>\nThe Code<\/h2>\nMaximum Date = Today. \u00a0Minimum Date = 10 years ago<\/h3>\n
In this example the minimum date is set as 10 years ago: \u00a0-10 Y<\/p>\n
The maximum date is set to today: 0<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\ngform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\nif ( formId == 1 && fieldId == 2 ) {\r\noptionsObj.minDate = '-10 Y';\r\noptionsObj.maxDate = 0;\r\n\r\n}\r\nreturn optionsObj;\r\n} );\r\n\r\n<\/script>\r\n <\/code><\/pre>\nDates Must Be in the Next Two Weeks<\/h3>\n
To limit the dates to only be today or the next two weeks, the code would be this:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\n gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\n if ( formId == 1 && fieldId == 3 ) {\r\n optionsObj.minDate = 0;\r\n optionsObj.maxDate = '+2 W';\r\n \r\n }\r\n return optionsObj;\r\n } );\r\n\r\n<\/script>\r\n\r\n<\/code><\/pre>\nDate range from 10 Days Ago to 1 month away<\/h3>\n
Days are represented without a letter. \u00a0Months use the letter ‘M’, as shown in this example:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n\r\n gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {\r\n\r\n if ( formId == 1 && fieldId == 4 ) {\r\n optionsObj.minDate = '-10';\r\n optionsObj.maxDate = '+1 M';\r\n \r\n }\r\n return optionsObj;\r\n } );\r\n\r\n<\/script>\r\n\r\n<\/code><\/pre>\nLive Demo<\/h2>\n
[gravityform id=”1″ title=”true” description=”false”]<\/p>\n
So that is how to restrict the range of dates available in the date picker easily in Gravity Forms.<\/p>\n