Skip to content

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:

ValidatorDescription
RequiredRequires the user to select a date
EqualsChecks 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:

FormatExample
MM/DD07/12
DD/MM12/07
MM/DD/YYYY07/12/2026 (default)
DD/MM/YYYY12/07/2026
YYYY-MM-DD2026-07-12
DD MMM YYYY12 Jul 2026
DD MMMM YYYY12 July 2026
HH:mm, DD/MM/YY14:30, 12/07/26

Format explanation

  • MM = month, DD = day, YYYY = four-digit year, YY = two-digit year
  • MMM = 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 start date and an 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:

  1. Enable range selection in the "Check-in date" field
  2. Pick the "Check-out date" field as Element End
  3. After the user selects a range in "Check-in date", the end date is automatically filled into the "Check-out date" field

The two fields work together to record the start and end dates of the range.

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:

PartDescription
TypeThe time granularity of the rule: Day, Week, Month, Year, Range
DatePick 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:

PartDescription
FieldPick a target field from the dropdown (shows the field's Label)
OperatorThe comparison condition
ValueThe target value to compare against

Supported operators ​

OperatorDescription
isTriggers when the field value equals the specified value
is notTriggers when the field value does not equal the specified value
is emptyTriggers when the field value is empty
is not emptyTriggers 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-15

then 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 ​

Built with VitePress