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 Plugin Does

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

This plugin 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: Install The Plugin

Once downloaded, you can install the plugin like any other WordPress plugin from within your WordPress admin by going to Plugins > Add New Plugin > Upload Plugin.

• Click the Download Plugin button below
• Go to Plugins > Add New Plugin > Upload Plugin
• Click Choose File and locate the zip file labeled multidate-picker-gravity-forms-main.zip
• Click Install Now
• Click Activate
• Go to Plugins > Plugin File Editor
• Select the Multi-Date Picker Field for Gravity Forms in the select field (top right)
• Click Select
• In the main plugin file, multidate-picker-gravity-forms.php, make 2 edits
  • Set form_id to your forms ID number
  • Set field_id to your single line text field ID number
• Click Update File
• Go to the page your form is embedded on and test the new date picker

Don’t Have the Plugin File Editor?

If you don’t see the Plugin File Editor in your WordPress Plugins menu, you can follow the steps below to edit the plugin files.

• Click the Download Plugin button below
• Locate the multidate-picker-gravity-forms-main.zip file and open it
• Use a text editor to edit the `multidate-picker-gravity-forms.php` file
  • Set form_id to your forms ID number
  • Set field_id to your single line text field ID number
• Compress the plugin files
• Go to Plugins > Add New Plugin > Upload Plugin
• Click Choose File and locate the zip file you edited
• Click Install Now
• Click Activate

Editing the Code

In the multidate-picker-gravity-forms.php file, you will need to edit the code adding your form ID and the field ID you want to use as the date picker. The field should be a single line text field.

• 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:

'form_id' => absint(1),
'field_id' => absint(6),
'date_format' => sanitize_text_field('mm/dd/yy'),

Test the Multi-Date Picker

You can not test this in the form preview, the plugin will not run in the admin. You will need to embed this form on a page or use the Gravity Wiz Live Preview add-on in order to properly test this plugin.

1. Go to the page where the form is embedded.
2. The target field should now display the multi-date picker calendar icon.
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.