How to Disable Weekends and Holidays 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.
No-Code | Code
Code
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>
</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;
}
);
</script>
<?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;
}
);
</script>
<?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;
}
);
</script>
<?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;
}
);
</script>
<?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;
}
);
</script>
<?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!