Date Picker

Calendar popover for one date or a date span — with fixed or rolling bounds via dateMin and dateMax (ISO, today, or today±Nd).

Overview

The Date Picker opens a calendar for choosing dates. The field is ideal for bookings, deadlines, birth dates, and travel windows where a native text box would invite inconsistent formats.

Answers are normalized to values the renderer validates against dateMin / dateMax. Use the same keys in exported builder JSON — not legacy minDate / maxDate.

Patterns

Single day — default dateMode single. Respondent picks one calendar day.
Range — set dateMode to range for a start/end pair (validation expects both ends when the field is required).
Fixed window — absolute yyyy-MM-dd (or full ISO) bounds for blackout seasons or fiscal periods.
Rolling window — today, today+90d, today-7d, etc. Limits shift whenever the respondent opens the form.

Tip: Pair rolling bounds with a short instruction so respondents know why certain dates are disabled.

Properties

Note: Builder exports include an id (UUID) per field; submission payloads use those ids as keys.

Property	Type	Default	Description
id	string	—	Unique field identifier.
type	string	"date"	Discriminator.
label	string	—	Human-readable label shown above the field or step heading.
required	boolean	false	When true, the form cannot submit without a value.
isHidden	boolean	false	Hides the field from respondents (may still store defaults).
isDisabled	boolean	false	Renders the field read-only.
instruction	string	undefined	Help text shown below the label (not the same as placeholder).
dateMode	"single" \| "range"	"single"	Single day vs start/end span.
dateMin	string	undefined	Inclusive lower bound: yyyy-MM-dd, ISO datetime, today, or today±Nd.
dateMax	string	undefined	Inclusive upper bound; same formats as dateMin.
reporting	object	undefined	Admin submissions table: includeInTable, labelOverride, sortable, filterable.
integrationKey	string	undefined	Stable alias for external integrations instead of id.

JSON examples

Fixed ISO window

Typical builder export with explicit calendar boundaries:

{
  "id": "4c294037-6908-4c93-b143-5a6cfc38db5c",
  "type": "date",
  "label": "Date Field",
  "required": false,
  "isHidden": false,
  "placeholder": "Enter date...",
  "dateMin": "2026-05-14",
  "dateMax": "2026-05-15"
}

Rolling booking window

Prevent choosing dates before today or more than 90 days ahead—bounds shift automatically each calendar day:

{
  "id": "7bb210aa-1234-4c93-b143-5a6cfc38aaaa",
  "type": "date",
  "label": "Appointment Date",
  "required": true,
  "placeholder": "Pick a date",
  "dateMin": "today",
  "dateMax": "today+90d"
}

Range mode

Set dateMode to range to capture from /to; dateMin /dateMax apply the same way during validation.

{
  "id": "88aa10bb-5678-4c93-b143-5a6cfc38bbbb",
  "type": "date",
  "label": "Trip dates",
  "required": true,
  "dateMode": "range",
  "dateMin": "today",
  "dateMax": "today+365d"
}

Stored value

Single: an ISO date string or value coerced to a Date. Range: an object { from?: string|Date, to?: string|Date }— both ends should fall within dateMin / dateMax when set.

Use cases

Rolling intake windows (“from today through the next quarter”) without republishing forms
Hard-coded blackout periods using absolute yyyy-MM-dd bounds
Travel or leave ranges using dateMode range with long-horizon caps
Compliance deadlines anchored on today+N rules instead of static years

PreviousRadio Group

NextRange / Slider