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 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:

  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 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:

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