How to disable weekends and holidays
in a Gravity Forms date picker
in a Gravity Forms date picker
You might want to disable weekends and holidays in your Gravity Forms date picker if you want to make sure people don't book appointments or make purchases on days when your office is closed, or maybe you want to encourage people to take a break, or you might have some other reason.
Whatever the reason, it's easy to do!
In this article we'll go through the steps you can take to make this happen, either by coding or visually using the Hero for Gravity Forms add-on.
Using Gravity Forms JavaScript hooks
Gravity Forms provides a number of JavaScript hooks that work just like WordPress hooks, and, as you might expect, they can be used to customize the behavior of your forms.
For our purposes, we're interested in the gform_datepicker_options_pre_init hook, which allows us to modify the options that are passed to the jQuery UI Datepicker when it's initialized.
You can find a list of all the available options in the jQuery UI Datepicker documentation. We'll be using the beforeShowDay option, which allows us to specify a function that will be called before each day is displayed in the date picker, and we can use this function to specify which days should be kept enabled and which should be disabled.
To add our custom JavaScript, we'll start by creating a simple plugin, as described in the article about adding custom code to WordPress. We'll create an example.php file to hold the plugin code, ZIP it, upload it in the admin section and activate the newly created plugin.
<?php
/**
* Plugin Name: Example Custom Code
*/Now that we're set up to add custom code, we can use the wp_head hook to add a <script> tag as part of the <head> generated by WordPress.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );We're using 20 as the priority to add_action() to make sure our code is added after Gravity Forms has added its own code, because we're going to be using part of the Gravity Forms JavaScript API which needs to be available. Since Gravity Forms uses the default priority of 10, we need to use a higher priority.
With that, we can now hook into gform_datepicker_options_pre_init by using the provided gform.addFilter() function.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
gform.addFilter(
'gform_datepicker_options_pre_init',
function( optionsObj ) {
return optionsObj;
}
);
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );optionsObj is an object that contains all the options that are passed to the jQuery UI Datepicker when it's initialized. We can use this object to modify the options and add our beforeShowDay function.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
gform.addFilter(
'gform_datepicker_options_pre_init',
function( optionsObj ) {
optionsObj.beforeShowDay = function( date ) {
return [ true ];
};
return optionsObj;
}
);
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );From the jQuery UI Datepicker documentation, we can see that the beforeShowDay function should return an array where the first element is a boolean that specifies whether the day should be enabled or disabled.
So let's start by disabling Saturdays and Sundays. The date parameter is a JavaScript Date object, which has a getDay() method returning the day of the week, where 0 is Sunday, 1 is Monday, and so on, up to 6 which is Saturday. So if the day of the week is 0 or 6, we'll return false to disable the day, otherwise we'll return true to enable it.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
gform.addFilter(
'gform_datepicker_options_pre_init',
function( optionsObj ) {
optionsObj.beforeShowDay = function( date ) {
var day = date.getDay();
return [
day != 0 /* Sunday */ &&
day != 6 /* Saturday */
];
};
return optionsObj;
}
);
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );If you now add a Gravity Forms date field to a form, you'll see that Saturdays and Sundays are disabled.
So far so good! Let's see how to disable holidays as well.
The jQuery UI date picker also provides a formatDate() utility function that can be used to format a date object into a string. We can use this function to easily format the date that's passed to the beforeShowDay function, and then use that formatted date to check if it's a holiday.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
gform.addFilter(
'gform_datepicker_options_pre_init',
function( optionsObj ) {
optionsObj.beforeShowDay = function( date ) {
var day = date.getDay();
var dmDate =
jQuery.datepicker.formatDate(
'dd/mm', date
);
return [
day != 0 /* Sunday */ &&
day != 6 /* Saturday */ &&
dmDate != '01/01' /* New Year */ &&
dmDate != '25/12' /* Christmas */
];
};
return optionsObj;
}
);
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );If you refresh the page with a Gravity Forms date field, you'll see that the 1st of January and 25th of December are now disabled as well.
And if you'd like to target a certain form and a certain field by ID, you can do so by making use of the second and third parameters of the gform_datepicker_options_pre_init filter. The second parameter is the form ID, and the third parameter is the field ID. If they don't match the form and field ID you're targeting, you can simply return the optionsObj without making any changes.
<?php
/**
* Plugin Name: Example Custom Code
*/
function example_wp_head() {
?>
<script>
gform.addFilter(
'gform_datepicker_options_pre_init',
function( optionsObj, formId, fieldId ) {
if ( formId != 1 || fieldId != 1 ) {
return optionsObj;
}
optionsObj.beforeShowDay = function( date ) {
var day = date.getDay();
var dmDate =
jQuery.datepicker.formatDate(
'dd/mm', date
);
return [
day != 0 /* Sunday */ &&
day != 6 /* Saturday */ &&
dmDate != '01/01' /* New Year */ &&
dmDate != '25/12' /* Christmas */
];
};
return optionsObj;
}
);
<?php
}
add_action( 'wp_head', 'example_wp_head', 20 );As you can imagine, you can easily add more holidays, such as national holidays, or even days that are disabled for other reasons, such as days when the company is closed. And all it takes is a few extra lines of code!
If you prefer a visual editor instead of writing code, then all this can also be done with Hero for Gravity Forms.
Using Hero for Gravity Forms
If all you need to do is disable weekends, then you can easily do this with the Essential package. Simply select “Enable only weekdays” from the Date Filter dropdown of any Gravity Forms date field under the “General” section, and you're done!
However, if you need to disable holidays as well, then you'll need the Advanced package, which gives you two options to disable holidays: either by selecting from a predefined list of holidays, or by composing your own custom date filters.
First, you can check if the predefined list of holidays already contains the holidays you need to disable. To do so, select “Custom” from the Date Filter dropdown of any Gravity Forms date field under the “General” section, and then select “Disable” and “Holidays”.
The list of holidays contains the US Federal Holidays as well some common holidays celebrated around the world, and is calculated automatically every year.
If the holiday you need to disable is not in the list, then you can create your own custom date filter.
Start by selecting “Custom” from the Date Filter dropdown of any Gravity Forms date field under the “General” section. This will allow you to create a custom filter by applying a list of conditions in order.
Let's change the first condition from “Enable all dates” to “Disable weekends”.
We now have a custom date filter with one condition, which disables weekends and keeps every other day enabled.
Let's add another condition. Click the “+” button next to the first condition to create a new condition after it. Now that we have a second condition, we can configure it to “Disable specific dates”.
Select “01” as the day, “January” as the month, and leave the year empty to apply to all years, then do the same for 25 December.
Save the form and that's it! This date field will now have weekends, Christmas and New Year day disabled.
Closing thoughts
Be aware that these solutions apply only to the date picker. Users can still select any date by simply writing the date in the input box. One way of solving this issue is to make the input box read only, and we cover this technique in a separate article: How to make Gravity Forms date inputs read only.
Even if the input box is read only, users can still make a request to the server with whatever input value they desire, but this is not achievable by using the frontend as intended, so we're not going to cover this case.