Disable Weekends or Specific Weekdays on Gravity Forms Date Picker Field

The Gravity Forms date field uses the jQuery UI datepicker, which makes it highly customisable and coupled with the gform_datepicker_options_pre_init Gravity forms filter you can easily make the datepicker work how you want it.

In this article, I’ll show you how to disable weekends or specific days with just a few lines of code.

Firstly, if you just want to disable weekends then you just need to add these few lines of code to your WordPress theme’s functions.php file. On the form’s date field you need to go to the Appearance section and add no-weekends in the “Custom CSS Class” field.

add_filter('gform_field_content', 'disable_weekends_on_datepicker', 10, 5);
function disable_weekends_on_datepicker($content, $field, $value, $lead_id, $form_id) {
	if($field->cssClass == 'no-weekends' && RG_CURRENT_VIEW != 'entry') {
		$datepicker_disable_weekends_code = '
		<script>
		jQuery(function() {
			gform.addFilter("gform_datepicker_options_pre_init", function(optionsObj, formId, fieldId) {
				if(formId == '.$form_id.' && fieldId == '.$field->id.') {
					optionsObj.beforeShowDay = jQuery.datepicker.noWeekends;
				}
				return optionsObj;
			});
		});
		</script>
		';

		$content = $content.$datepicker_disable_weekends_code;
	}
	return $content;
}

If you want to disable specific days of the week then on the form’s date field add restrict-days in the “Custom CSS Class” field under the Appearance settings. In your WordPress theme’s functions.php file add the code from below.

In this example we’ll be disabling Monday, Tuesdays and Fridays. To specify which days you want to change you just need to change the var days_disabled = [1,2,5]; code to the days you want to change as a comma separated string based on the following:

0 Sunday
1 Monday
2 Tuesday
3 Wednesday
4 Thursday
5 Friday
6 Saturday

So if you wanted it to be Wednesday and Thursdays to be disabled then you’d have:

var days_disabled = [3,4];

add_filter('gform_field_content', 'restrict_days_on_datepicker', 10, 5);
function restrict_days_on_datepicker($content, $field, $value, $lead_id, $form_id) {
	if($field->cssClass == 'restrict-days' && RG_CURRENT_VIEW != 'entry') {
		$datepicker_restrict_days_code = '
		<script>
		jQuery(function() {
			gform.addFilter("gform_datepicker_options_pre_init", function(optionsObj, formId, fieldId) {
				if(formId == '.$form_id.' && fieldId == '.$field->id.') {
					var days_disabled = [1,2,5];
					optionsObj.beforeShowDay = function(date) {
						if(jQuery.inArray(date.getDay(), days_disabled) === -1) {
							return [true, ""];
						}
						return [false, ""];
					}
				}
				return optionsObj;
			});
		});
		</script>
		';

		$content = $content.$datepicker_restrict_days_code;
	}
	return $content;
}