Inline Datepickers with Gravity Forms

Replace the Gravity Forms datepicker with an inline datepicker to improve the mobile experience.

This article requires the GP Limit Dates perk.

Buy Gravity Perks to get this perk plus 47 other premium Gravity Forms plugins!

View Plugin Buy Gravity Perks

The Problem

Have you ever wanted an inline version of the Gravity Forms date picker instead of the default drop down version? I tend to have issues with autocomplete in desktop browsers, and the experience on mobile can be a little strange when the keyboard pops up after tapping on the Date field.

The Solution

Replacing the date picker with an inline version solves both these problems. To do so, simply install and activate GF Limit Dates, and on the Perks tab of a Date field check the Enable Inline Date Picker checkbox.

The Result

That’s all there is to it. Your date picker drops the input box and goes inline, thus avoiding autocomplete headaches and gaining a better mobile experience.

Ahh, that's better!


  1. Marissa Leclerc
    Marissa Leclerc May 4, 2022 at 3:11 pm

    Hi there, Got excited about the link to the CSS to match the screenshots! It leads to a 404 page though…Anywhere we could find it? :) Thanks in advance!

    1. Dario Space
      Dario Space January 10, 2022 at 10:12 am

      Hi JP,

      This currently works for Date fields.

      If you have an active Gravity Perks License, you can get in touch with us via our support form so can dig into this feature.



  2. Chelsea
    Chelsea July 14, 2021 at 4:53 pm


    Interested in this for our school’s cafeteria and aftercare programs. We will need the date picker to be limited to the Monday of the following week. They have to have their forms submitted by Friday so the cafeteria knows what to have ready for the next week and the aftercare program knows how many workers are need to care for the kids. I see that I can pick a date on here, but I’d need it to automatically change to the next Monday date on every Friday. Does that make sense and is this possible with this perk?

    1. Dario Space
      Dario Space July 14, 2021 at 5:22 pm

      Hi Chelsea,

      With Limit Dates Per you could set the datepicker field to only allow Mondays as you mention. You can also set the Minimum date to the current day. This should work for your use case: if current day is Friday, the only days that will be selectable will be Mondays after today.

      If you have an active Gravity Perks License, you can open a ticket with us via our support form, with your account email, so we can take a look at your setup and assist you further.


  3. Jones Nismond
    Jones Nismond July 8, 2020 at 7:45 am

    Hey. Im curious about this feature. I have one really essential question before puchasing this.

    Am I able to use gravity forms datepicker_options_pre_init -filter with start date field the same way I can use it with date picker field? Specifically I need to disable certain dates like in this script:

    /////////// gform.addFilter( ‘gform_datepicker_options_pre_init’, function( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 14 ) { var disabledDays = [’06/15/2014′, ’07/01/2014′, ’07/15/2014′]; optionsObj.beforeShowDay = function(date) { var checkdate = jQuery.datepicker.formatDate(‘mm/dd/yy’, date); return [disabledDays.indexOf(checkdate) == -1]; }; } return optionsObj; }); ///////////

    Thank you in advance!!

    1. Samuel Bassah
      Samuel Bassah Staff July 8, 2020 at 7:55 am

      Hi Jones,

      That’s exactly what it does. The GP Limit Dates Perk allows you to do all that you mentioned. Here is the support document on GP Limit Dates with all the features it offers.

    2. Jones Nismond
      Jones Nismond July 9, 2020 at 2:00 am

      Thanks for the quick reply. I meant to ask is it possible to bring those disabled dates from outside gravity forms as a array or so? In (exact) same manner than in the script? I have those dates stored elsewhere and would make updating easier if I didn’t have to make them again manually. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.