If you have used a Gravity Forms Date field and wanted to block weekends, disable certain dates, or only allow a selected range of dates, you may have found the official documentation a bit limiting.

Gravity Forms provides examples for each of these individually, but not how to combine them. In this post, I’ll show you how to do just that, with clear examples and a complete working script.

Step 1: Use the gform_datepicker_options_pre_init filter

This Gravity Forms filter allows you to customise the jQuery UI Datepicker used by date fields. You need to target your form ID and field ID:

gform.addFilter('gform_datepicker_options_pre_init', function(optionsObj, formId, fieldId) {
  // Your logic goes here
  return optionsObj;
});

Step 2: Define your allowed date ranges

We’ll define specific ranges during which dates should be selectable.

var ranges = [
  { start: new Date('09/25/2025'), end: new Date('10/05/2025') },
  { start: new Date('11/10/2025'), end: new Date('11/20/2025') }
];

Step 3: Disable specific dates

You may want to block specific public holidays or unavailable days. Format these as dd/mm/yyyy.

var disabledDays = [
  '26/09/2025',
  '29/09/2025',
  '25/12/2025',
  '01/01/2026',
  '05/01/2026'
];

Step 4: Disable weekends

Gravity Forms uses jQuery UI Datepicker under the hood, which includes a built-in function to block weekends:

var noWeekend = jQuery.datepicker.noWeekends(date);
if (!noWeekend[0]) return noWeekend;

Step 5: Combine all conditions in a single function

Full Working Example

Here is the complete code including form and field checks:

gform.addFilter('gform_datepicker_options_pre_init', function(optionsObj, formId, fieldId) {
  if (formId == 12 && fieldId == 16) {

    var ranges = [
      { start: new Date('09/25/2025'), end: new Date('10/05/2025') },
      { start: new Date('11/10/2025'), end: new Date('11/20/2025') }
    ];

    var disabledDays = [
      '26/09/2025',
      '29/09/2025',
      '25/12/2025',
      '01/01/2026',
      '05/01/2026'
    ];

    optionsObj.minDate = ranges[0].start;
    optionsObj.maxDate = ranges[ranges.length - 1].end;
    optionsObj.firstDay = 1;

    optionsObj.beforeShowDay = function(date) {
      var inRange = ranges.some(function(range) {
        return date >= range.start && date <= range.end;
      });
      if (!inRange) return [false];

      var noWeekend = jQuery.datepicker.noWeekends(date);
      if (!noWeekend[0]) return noWeekend;

      var formatted = ('0' + date.getDate()).slice(-2) + '/' +
                      ('0' + (date.getMonth() + 1)).slice(-2) + '/' +
                      date.getFullYear();

      if (disabledDays.indexOf(formatted) !== -1) return [false];

      return [true];
    };
  }

  return optionsObj;
});

Optional: Hide Dates from Other Months

By default, the datepicker shows days from the previous and next months to fill out the calendar grid. To hide those days for a cleaner look, you can use the following CSS:

.ui-datepicker td.ui-datepicker-other-month {
  visibility: hidden;
}

This hides the content but keeps the grid layout intact. If you prefer to completely remove those cells, you can use display: none, but it may affect layout consistency.

Wrapping Up

Gravity Forms makes it easy to add date pickers, but combining rules for weekends, specific dates, and ranges requires a bit of manual work. With the example above, you now have full control over which dates can be selected in your form.

If you’re working on a more complex booking or survey system, this kind of control can be essential.