Date
A date picker field for collecting calendar dates with optional min/max constraints and timezone handling.
The Date field provides a native date picker that lets users select a calendar date. It supports configurable date range constraints and timezone storage modes to ensure dates are stored accurately regardless of the user's location.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label text displayed above the field |
| placeholder | string | -- | Ghost text shown inside the input when empty |
| required | boolean | false | Whether a value must be provided before submission |
| width | LayoutWidth | "full" | Horizontal space the field occupies ("1/4", "1/3", "1/2", "2/3", "3/4", "full") |
| help | string | -- | Help text displayed below the field |
| key | string | -- | Variable name for referencing the field value |
| minDate | string | -- | Earliest selectable date (ISO format, e.g. "2024-01-01") |
| maxDate | string | -- | Latest selectable date (ISO format, e.g. "2025-12-31") |
| timezoneMode | TimezoneStorageMode | "local" | How the date value is stored: "local", "utc", "creator", or "specific" |
| creatorTimezone | string | -- | IANA timezone stored when timezoneMode is "creator" (set automatically) |
| specificTimezone | string | -- | IANA timezone (e.g. "America/New_York") when timezoneMode is "specific" |
Timezone Storage Modes
The timezoneMode property controls how the selected date is stored:
- local -- Store exactly as the user entered it, with no conversion.
- utc -- Convert the date to UTC before storing.
- creator -- Convert to the form creator's timezone, captured when the field is added.
- specific -- Convert to a specific IANA timezone chosen by the creator (e.g.
"Europe/London").
Validation
The Date field inherits standard input validations:
| Property | Type | Description |
|---|---|---|
| min | number | Minimum value constraint |
| max | number | Maximum value constraint |
| pattern | string | Regular expression the value must match |
| patternMessage | string | Custom error message when pattern validation fails |
Date-range validation is handled through the minDate and maxDate properties. If a user selects a date outside the allowed range, a validation error is displayed.
Example Usage
A booking form that only accepts dates within the next 90 days:
{
"type": "date",
"label": "Preferred Appointment Date",
"required": true,
"minDate": "2025-01-01",
"maxDate": "2025-12-31",
"timezoneMode": "utc",
"placeholder": "Select a date"
}