Date Range

Free feature

Date range is available to all Fomr users.

The Date Range component allows respondents to select both a start date and an end date. Use it to collect time periods, booking windows, and duration information.

When to use Date Range

Date Range is useful for:

• Travel dates (departure and return)
• Project timelines (start and end)
• Booking periods
• Event durations
• Availability windows
• Any question requiring a period of time

Tip

For a single date, use the Date component. For date with time, use Date & Time.

Adding a Date Range component

1. Open your form in the editor

2. Drag the Date Range component from the left sidebar onto your form

3. Click the component to select it and configure its settings

Configuration options

Question label

The main question or prompt displayed above the date range picker.

Examples:

• “Travel dates”
• “Project timeline”
• “When are you available?”
• “Booking period”

Description

Optional helper text that appears below the question label.

When to use descriptions:

• To clarify what the dates represent
• To specify any constraints
• To provide context

Examples:

• “Select your departure and return dates”
• “When does your project start and end?”
• “Choose your preferred booking window”

Date format

Choose how dates are displayed:

Format	Example
MM/DD/YYYY	01/15/2024 - 01/20/2024
DD/MM/YYYY	15/01/2024 - 20/01/2024
YYYY-MM-DD	2024-01-15 - 2024-01-20

Required

Toggle whether both dates must be selected before the form can be submitted.

When enabled:

• An asterisk (*) appears next to the question label
• Users must select both start and end dates to submit
• A validation message appears if either date is missing

Date range picker interaction

Selecting start date

1. Click the start date field or the calendar
2. Navigate to the desired month
3. Click to select the start date
4. The picker automatically moves to end date selection

Selecting end date

1. After selecting start date, choose the end date
2. End date must be on or after the start date
3. The range between dates is visually highlighted

Visual feedback

• Selected start date is highlighted
• Selected end date is highlighted
• Days between start and end are shaded
• Invalid dates (before start) are disabled for end selection

Changing dates

• Click either date field to modify it
• Changing start date may reset end date if it becomes invalid
• Both dates can be cleared and reselected

Tips for effective use

Label clearly. Make it obvious what the start and end dates represent (departure/return, start/end, first day/last day).

Use appropriate format. Match the date format to your audience’s expectations.

Consider minimum duration. If there’s a minimum booking period, mention it in the description.

Think about maximum range. For very long potential ranges, consider if date range is the right component.

Provide context. Help respondents understand what dates are valid or preferred.

Validation

The Date Range component validates:

• Both start and end dates are selected (if required)
• End date is on or after start date
• Dates are valid calendar dates

Common validation messages:

• “Please select both dates”
• “End date must be after start date”

Accessibility

The Date Range component is built with accessibility in mind:

• Keyboard navigation for both date pickers
• Screen reader compatible
• Clear focus states
• Range selection is announced
• Proper ARIA labels

Handling responses

Date range responses in your form results:

• Display both start and end dates
• Show the duration (number of days)
• Can be filtered by date range
• Are included in exports with both dates

Calculating duration

From a date range response, you can calculate:

• Number of days: End date - Start date + 1 (inclusive)
• Number of nights: End date - Start date (for hotel bookings)
• Weeks: Days / 7