The Date & Time component combines date and time selection into a single input. Use it when you need to collect both a specific date and time together, such as for scheduling appointments or events.
When to use Date & Time
Section titled “When to use Date & Time”Date & Time is useful for:
- Appointment scheduling
- Event start/end times
- Meeting requests
- Deadline timestamps
- Reservation times
- Any question requiring both date and time
Adding a Date & Time component
Section titled “Adding a Date & Time component”-
Open your form in the editor
-
Drag the Date & Time component from the left sidebar onto your form
-
Click the component to select it and configure its settings
Configuration options
Section titled “Configuration options”Question label
Section titled “Question label”The main question or prompt displayed above the picker.
Examples:
- “Appointment date and time”
- “When would you like to schedule the meeting?”
- “Event start”
- “Preferred pickup time”
Description
Section titled “Description”Optional helper text that appears below the question label.
When to use descriptions:
- To specify timezone
- To indicate available slots
- To provide scheduling context
Examples:
- “All times are in Eastern Time (ET)”
- “Available Monday-Friday, 9 AM - 5 PM”
- “Select your preferred date and time for the consultation”
Date format
Section titled “Date format”Choose how dates are displayed:
| Format | Example |
|---|---|
| MM/DD/YYYY | 01/15/2024 |
| DD/MM/YYYY | 15/01/2024 |
| YYYY-MM-DD | 2024-01-15 |
Date limit
Section titled “Date limit”Set the earliest and latest selectable dates.
Time format
Section titled “Time format”Choose how times are displayed:
| Format | Example |
|---|---|
| 12-hour | 2:30 PM |
| 24-hour | 14:30 |
Time limit
Section titled “Time limit”Restrict the selectable times to a range.
Minute step
Section titled “Minute step”Control the granularity of minute selection:
| Step | Available Minutes |
|---|---|
| 1 | Every minute |
| 5 | 00, 05, 10… 55 |
| 10 | 00, 10, 20… 50 |
| 15 | 00, 15, 30, 45 |
| 30 | 00, 30 |
| 60 | 00 (hour only) |
Required
Section titled “Required”Toggle whether a date and time must be selected before the form can be submitted.
When enabled:
- An asterisk (*) appears next to the question label
- Users must select both date and time to submit
- A validation message appears if incomplete
Date and time picker interaction
Section titled “Date and time picker interaction”Selecting date
Section titled “Selecting date”- Click the date component to open the calendar
- Navigate to the desired month
- Click the date to select it
Selecting time
Section titled “Selecting time”- Select the hour
- Select the minutes (based on step setting)
- Choose AM/PM (for 12-hour format)
Combined selection
Section titled “Combined selection”The component may display:
- Side-by-side date and time components
- Sequential selection (date first, then time)
- Combined picker interface
Validation
Section titled “Validation”The Date & Time component validates:
- Both date and time are selected
- Date is valid
- Time is valid
- Component is not empty (if required)
Accessibility
Section titled “Accessibility”The Date & Time component is built with accessibility in mind:
- Keyboard navigation for both date and time
- Screen reader compatible
- Clear focus states
- Proper ARIA labels
- Formats are announced
Handling responses
Section titled “Handling responses”Date & Time responses in your form results:
- Display both date and time together
- Can be sorted chronologically
- Are included in exports as timestamps
- Allow filtering by date or time
Time zone considerations
Section titled “Time zone considerations”The Date & Time component collects a timestamp without explicit timezone information. Best practices:
- Specify timezone in description: “All times are in Pacific Time (PT)”
- Ask for timezone separately: Add a dropdown if respondents are in different zones
- Use UTC for storage: Convert to UTC in your backend for consistency
- Clarify local vs. specific: State whether times are in respondent’s local time or a specific zone