How can we help you?

1. Overview & Architectural Benefits

When collecting date ranges in Gravity Forms—such as hotel reservations, equipment rentals, multi-day event bookings, or shift scheduling—the traditional approach requires creating two separate Date fields (one for “Start Date” and one for “End Date”). This traditional multi-field method introduces severe usability and technical challenges:

• Reverse Date Vulnerability: Respondents can easily submit an end date that occurs before their start date, causing booking conflicts unless you write complex custom JavaScript validation.
• Double Click Fatigue: Users must click into two separate fields and interact with two independent calendar popovers, increasing mobile abandonment rates.
• Lack of Time Coordination: If you also need check-in and check-out times, you must add two additional Time fields, ballooning your form to four distinct inputs for a single reservation.

The Advanced Start/End Date/Time Range Selection Add-on solves this entirely by introducing a native, unified custom field that combines start dates, end dates, and exact arrival/departure times into a single intuitive dual-calendar popup.

2. Installation & License Activation

1. Log in to your WordPress dashboard and navigate to Plugins → Add New.
2. Click Upload Plugin, select the add-on ZIP file downloaded from your GravityExtra account, and click Install Now.
3. Once uploaded, click Activate Plugin.
4. Go to Forms → Settings → License, enter your license key, and click Activate License to enable one-click automated updates and support.

3. Adding the Field to Your Form

Once the add-on is activated, a new dedicated field labeled Date Time Range Selection becomes available in your Gravity Forms form editor under the Advanced Fields drawer.

Click or drag the Date Time Range Selection button into your form canvas. Click on the field to open the Field Settings sidebar where you can configure the general field attributes:

• Field Label: Give your field a descriptive title such as Reservation Dates, Rental Period, or Project Window.
• Description: Provide optional instructions to guide respondents (e.g., “Select your arrival date and departure date from the calendar.”).
• Rules (Required): Mark the field as required to prevent empty submissions.

4. Calendar Display, Alignment & Dropdown Positioning

Because forms vary widely in width, column arrangements, and page placement, the add-on offers granular control over how the calendar modal pops up on screen.

Alignment Settings (Opens & Drops)

Under the field settings, you can adjust the alignment of the picker container relative to the input field:

• Opens (Horizontal Alignment): Choose whether the picker aligns to the Left, Right, or Center of the input field. For fields placed in the right column of a 2-column layout, choosing Left prevents the popup from clipping off the screen edge.

• Drops (Vertical Positioning): Choose Down to display the calendar below the input (standard) or Up (Dropup) if the field is situated near the bottom of a modal or footer.

Single vs. Linked Dual Calendars

• Single Date Picker: When enabled, transforms the picker into a single calendar for capturing a single specific date while retaining all advanced formatting and time features.
• Linked Calendars: When enabled (recommended for ranges), the two side-by-side calendars always show consecutive sequential months (e.g., May & June). Clicking navigation arrows moves both calendars simultaneously. When disabled, users can navigate each month pane independently.
• Show Dropdowns: Displays convenient Month and Year select dropdowns at the top of each calendar, allowing users to jump directly to past or future years without clicking next/previous dozens of times.
• Empty by Default: Leave the input field blank until the user explicitly selects a range, preventing accidental submissions with prefilled default dates.

5. Integrated Time Selection (12-Hour vs. 24-Hour Format)

For rental businesses, meeting rooms, or appointment scheduling, dates alone are not enough. The add-on includes a built-in time picker slider directly beneath the dual calendars:

• Hour Format: Choose between 12 (with AM/PM selector) and 24 (00:00 to 23:59).
• Disable Time Input: If your form only requires dates without specific times (e.g., vacation leave requests), you can toggle this option to completely hide the time selector and save vertical height.

6. Predefined Quick Presets Sidebar

For reporting filters, analytics queries, or expedited booking flows, users often want common ranges like “This Month” or “Last 7 Days” without manually clicking start and end days.

When Pre-defined presets of date ranges selection is checked, a responsive sidebar appears alongside the dual calendars with instant one-click shortcuts:

• Today & Yesterday
• Last 7 Days & Last 30 Days
• This Month & Last Month
• Custom Range (activates manual calendar selection)

7. Date Constraints, Min/Max Year & Disabled Weekdays

Prevent users from submitting impossible booking dates with built-in boundary validation rules:

• Min Date: Restrict the earliest date selectable. For future bookings, setting this to the current date prevents respondents from picking past days.
• Min Year & Max Year: Define the allowable year boundary window inside the header dropdowns.
• CSS Classes: Add custom styling classes to seamlessly match your theme.

Disabling Specific Days of the Week (Business Days / Weekends)

If your office, rental facility, or clinic is closed on weekends or specific weekdays, the Disable Dates in Week feature allows you to grey out individual days (e.g., Saturday and Sunday). Users cannot click or select any disabled days, eliminating manual follow-up cancellations.

8. Custom Localization & Button Labels

Adapt the picker interface to any international language or customized branding without editing JavaScript files:

• Custom Date Format: Specify standard formats such as MM/DD/YYYY, DD/MM/YYYY, or YYYY-MM-DD.
• Custom Apply & Cancel Labels: Change the action button text (e.g., “Confirm Dates”, “Reset”).
• Custom Separator: Define the delimiter character displayed between start and end dates (e.g., - or to ).
• Days of Week & Month Names: Pass custom localized arrays for multi-language WordPress sites.

9. Entry Management, Merge Tags & Troubleshooting FAQs

When a form is submitted, the complete selected timeframe is saved directly into the Gravity Forms Entry database:

Using Merge Tags in Confirmations & Notifications

You can embed the selected range directly in admin notification emails, customer booking receipts, and PDF tickets using standard Gravity Forms merge tags:

• {Reservation Dates:1} — Outputs the complete formatted range (e.g., 15/10/2026 09:00 - 20/10/2026 18:00).
• {all_fields} — Automatically renders the range selection row within entry tables.

Frequently Asked Questions (FAQ)