Date
The Date element lets users select a date. It provides a calendar picker and supports time selection, date range limits, and day-of-week enable/disable.
Basic
Basic settings define the element's core properties.
Label
The label text shown above or beside the field (depending on the Label position setting). It also:
- Helps identify the field in the admin interface
- Appears as a heading in the form preview panel on the right
Unique Name
The internal identifier for this element. The name is auto-generated by default, but you can edit it manually. Naming rules:
- Lowercase letters, numbers, and underscores only
- Must start with a letter
This name references the field in email templates.
Label vs. Unique Name
The Label is the text shown to users, while the Unique Name is the internal identifier. For example, the Label could be "Booking Date" and the Unique Name booking_date.
Description
Explanatory text shown beneath the field, providing help and context.
Placeholder
A short hint shown in the field before the user selects a date.
Label Icon
Adds an icon to the field label.
Validate
The Date element supports these validation rules:
| Validator | Description |
|---|---|
| Required | Requires the user to select a date |
| Equals | Checks whether the date equals the specified value |
Styles
Label position
Controls where the label appears. Available options:
- Inherit: Uses the global configuration in Form style settings
- Vertical: Label above the date box
- Horizontal: Label to the left of the date box
- Hidden: Label hidden
Icon position
Controls where the icon appears. Available options:
- Inherit: Uses the global configuration
- Start: Icon on the left
- End: Icon on the right
Option
The core configuration of the Date element. It contains three sub-tabs: Options, Range, and Enable/Disable days.
Options sub-tab
Day of start week
The first day of each week in the calendar. Available options:
- Monday, Tuesday, Wednesday, Thursday
- Friday, Saturday, Sunday
TIP
Defaults to Monday, matching the convention of most countries. If your users are mainly in the United States, switch it to Sunday.
Language
The display language of the calendar. Available options:
- en-US (English), ru-RU (Russian), fr-FR (French), de-DE (German)
- ja-JP (Japanese), it-IT (Italian)
- Auto (detects browser language)
Time format
The display format of the date. Available options:
| Format | Example |
|---|---|
| MM/DD | 07/12 |
| DD/MM | 12/07 |
| MM/DD/YYYY | 07/12/2026 (default) |
| DD/MM/YYYY | 12/07/2026 |
| YYYY-MM-DD | 2026-07-12 |
| DD MMM YYYY | 12 Jul 2026 |
| DD MMMM YYYY | 12 July 2026 |
| HH:mm, DD/MM/YY | 14:30, 12/07/26 |
Format explanation
MM= month,DD= day,YYYY= four-digit year,YY= two-digit yearMMM= abbreviated month name (Jul),MMMM= full month name (July)HH:mm= hour:minute (shown only after enabling Time)
Number of visible months
The number of months shown at once in the calendar popup. Available options:
- 1: Show one month (default)
- 2: Show two months at once (handy for cross-month selection)
Time
When enabled, the date picker also shows a time picker (hour:minute), letting the user select a specific date and time.
Vs. the Time element
With Time enabled, the Date element selects both date and time. If you only need a time without a date, use the standalone Time element.
Min Date
The earliest date the user can select. Available options:
- Today: The minimum date is today; past dates cannot be selected
- Custom: Specify a specific date as the minimum
Max Date
The latest date the user can select. Available options:
- Today: The maximum date is today; future dates cannot be selected
- Custom: Specify a specific date as the maximum
Use cases
- Booking forms: Set Min Date to Today to prevent past dates
- Event registration: Set Min Date and Max Date to the event's registration window
Range sub-tab
Configures the date range selection mode, letting users pick a time period (start date and end date).
Enable
When enabled, this Date element becomes a date range picker, letting the user select a start date and an end date.
Element End
Shown after enabling range selection. The current Date field is the start date; here you pick another date field in the form as the end date. The two fields work together: the end date of the range the user selects in the start field is automatically synced into the end date field.
Field coordination
For example, with "Check-in date" and "Check-out date" fields:
- Enable range selection in the "Check-in date" field
- Pick the "Check-out date" field as Element End
- After the user selects a range in "Check-in date", the end date is automatically set as the value of the "Check-out date" field
The two fields record the start and end dates respectively, achieving date range coordination.
Min days
The minimum number of days in the date range (minimum 0).
Max days
The maximum number of days in the date range (minimum 0). Leave blank for no limit.
Range selection example
For a hotel booking: enable range selection, set Min days to 1 (at least 1 night) and Max days to 14 (at most 14 nights). After the user picks check-in and check-out dates, the system validates the number of days automatically.
Enable/Disable days sub-tab
Controls which dates in the calendar can be selected. You can set rules by day, week, month, year, or date range.
Rule
The date enable/disable mode. Available options:
- Null: No restriction (default)
- Enable days: Only the dates in the rule are enabled; all others are disabled
- Disable days: The dates in the rule are disabled; all others are enabled
Date logic rules
After choosing Enable days or Disable days, the rule configuration area appears. You can add multiple rules, each containing:
| Part | Description |
|---|---|
| Type | The time granularity of the rule: Day, Week, Month, Year, Range |
| Date | Pick the specific date, week, month, or range based on the type |
| 🗑 | Delete this rule |
Click Add date logic rule at the bottom to add a new rule.
Use cases
- Workdays only: Choose Enable days → add a Week rule, selecting Monday through Friday
- Disable holidays: Choose Disable days → add a Day rule, selecting specific holiday dates
- Specific months only: Choose Enable days → add a Month rule, selecting allowed months
Logic
Enable conditional logic
When enabled, configure rules to show or hide this element based on the user's input in other fields.
Rule match mode
After enabling conditional logic, first choose the match mode:
- Match any condition (any): The element shows/hides when any single rule is satisfied
- Match all conditions (all): The element shows/hides only when all rules are satisfied
Configure rules
Each rule has three parts:
| Part | Description |
|---|---|
| Field | Pick a target field from the dropdown (shows the field's Label) |
| Operator | The comparison condition |
| Value | The target value to compare against |
Supported operators
| Operator | Description |
|---|---|
| is | Triggers when the field value equals the specified value |
| is not | Triggers when the field value does not equal the specified value |
| is empty | Triggers when the field value is empty |
| is not empty | Triggers when the field value is not empty |
Add and manage rules
- Click Add logic rule to add a new rule
- Click the 🗑 button on the right of a rule to delete it
- Click the + button to add more match conditions
Example
For example, show the "Booking date" field only when the user selects "Yes" for "Do you need on-site service":
- Match mode: Match any condition
- Field: Do you need on-site service
- Operator: is
- Value: Yes
Data
Default value
The default date for the field. Pre-filled when the form opens.
Dynamic default value
When enabled, a Parameter name input appears. Enter the name of a URL parameter, and the system reads that value from the URL and fills it into this field automatically.
For example, if you enter date in Parameter name and the user visits:
https://yoursite.com/contact?date=2026-07-15then the field is auto-filled with 2026-07-15.
Maximum length
The maximum number of characters for input.
Read only
Makes the field read-only so the user cannot edit it.
Show in email
Controls whether this field's value appears in the email notifications (enabled by default). When disabled, the field's value is excluded from the submission email.
Advanced
Unique ID
The element's unique ID, auto-generated by the system. Read-only.
No filters
The Date element's value is picked from the calendar and needs no filter pre-processing, so the Advanced tab has no Filters.
Next steps
- Time — Time picker
- Form settings — Configure form styles and notifications