Gravity Forms Multi-Date Picker

Gravity Forms is a powerful form builder, but you might occasionally find some limitations. For example, the date picker field only supports selecting a single date. As a result, if you need the option to select multiple dates, you must add multiple date fields.

I was intrigued by a user’s request for this feature and decided to find a solution.

In this tutorial, I’ll walk you through a custom solution for adding a multi-date picker to a Gravity Forms field in WordPress.

What This Code Does

This code snippet will allow users to select multiple dates in a single input field, displaying the dates in a comma-separated format.

This code provides a multi-date picker for Gravity Forms by:

1. Dynamically adding a jQuery UI date picker to a specified field (single line text field).
2. Customizing the date picker to allow multiple date selections.
3. Displaying all selected dates within a single input field as comma-separated values.
4. Adding a close button to the date picker for user convenience.
5. The code includes a settings section to easily configure which form and field to target and specify the date format.

Doesn’t Gravity Forms Have a Date Picker?

Gravity Forms provides a built-in date field, but it has some limitations, primarily that it does not support selecting multiple dates in a single input field.

Limitations of the Standard Gravity Forms Date Field

1. Single Date Selection Only:

The built-in date field in Gravity Forms only allows users to select one date per field. There’s no built-in functionality for choosing multiple dates using the same input.

2. Adding Multiple Dates to the Input:

Even if you add support to the existing date field (which I tried), it can not collect more than one input and will not save the dates if more than one is selected.

How to Use This Code

Let’s walk through how to add it to your WordPress site.

Step 1: Get the Code

This code can be used as a standalone plugin, added directly to your theme’s functions.php file, or added to a code snippet plugin.

1. Standalone Plugin File:

• Click the Download Plugin button below
• Open the gravity-forms-multi-date-picker.php file on your computer
• And modify the configurations (shown below)
• Then compress the file and install it like a regular plugin

2. Copy and Paste the Code:

• Click the View Code button below
• Copy the code and paste it into your functions.php file or a code snippet plugin
• Modify the configurations (shown below)

The Code

Step 2: Configure the Code

In the $custom_functionality_config section, add configurations for each field where you want the multi-date picker to appear. Each configuration includes:

• form_id: The ID of the form in Gravity Forms.
• field_id: The ID of the specific field within the form.
• date_format: The date format for the picker (e.g., mm/dd/yy).

Example Configuration:

$custom_functionality_config = [
    [
        'form_id' => 1,
        'field_id' => 6,
        'date_format' => 'mm/dd/yy',
    ],
];

Step 3: Test the Multi-Date Picker

1. Go to the form you specified in the configuration.
2. The target field should now display the multi-date picker.
3. You can click the calendar icon to open the picker and select multiple dates, and they will appear as comma-separated values in the field.

The Wrap Up

This solution is a simple, flexible way to add a multi-date picker to Gravity Forms. It combines custom CSS, JavaScript, and PHP validation to create a seamless user experience for selecting multiple dates within a single line text field.

If you have issues with this code or need help setting it up, please use the comments below.