Gravity Forms ~ Date Field Min and Max Values

Limit the date range available from a Gravity Forms "Date" field using simple CSS rules.

Gravity Forms ~ Date Field Min and Max Values

We needed to add a date field to a form made using Gravity Forms to allow visitors to select a birth date and not allow users under or over a certain age to submit the form.

Our first thought was to simple use the excellent conditional options inside Gravity Forms to disable the submit button if the entered age was outside the range we wanted to allow – however, Gravity Forms does not allow conditional actions based on date fields – so we looked deeper.

We had previously used a filter hooked to gform_validation_{$form_id}  to add a validation error based on a calculation of the submitted date – but this solution is both complex and very form, field and date format specific – and can be a pain to test on development and staging versions which usually have some disparity between form and field ids.

So, we started to think about a more generic solution which could be controlled by the content editors from inside the Gravity Forms form editor.

The Date field uses the jQuery datepicker plugin to build the input on the front-end – and this can be hooked into using gform_post_render – allowing us to re-instantiate the datepicker with custom configurations, which also bind to forms reloaded after AJAX submissions.

Gravity Forms allows us to add additional CSS classes to the <li> that wraps around each field using the “Appearance” tab in the form editor:

So we entered the following in the CSS box – setting the min and max date range, limiting the dates shown to between 13 and 18 years from the current date:

limit_date min_date_-18y max_date_-13y

Then we added the following chunk of jQuery to the theme’s JavaScript file, hooking into the Gravity Forms action gform_post_render:

Enjoy and please feel free to comment and suggest improvements.

Gist List

4 Comments
Avatar

Hey BK, perhaps you can post this code on github or somewhere where it would be easier to read with correct format, then post and link and we’ll be happy to take a look!

Add a Comment

Your email address will not be published.

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or