Date and Time
A combined date-time picker for collecting both a calendar date and time in a single field.
The Date and Time field combines a date picker and a time picker into a single input, storing the result in ISO 8601 format (YYYY-MM-DDTHH:mm). Use it when you need both a date and a time in one field, such as for event scheduling or appointment booking.
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 |
| minDateTime | string | -- | Earliest selectable date-time (ISO format, e.g. "2024-01-01T09:00") |
| maxDateTime | string | -- | Latest selectable date-time (ISO format, e.g. "2025-12-31T17:00") |
| timezoneMode | TimezoneStorageMode | "local" | How the 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. "Europe/London") when timezoneMode is "specific" |
Timezone Storage Modes
The timezoneMode property controls how the selected date-time is stored:
- local -- Store exactly as the user entered it, with no conversion.
- utc -- Convert the date-time 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.
Validation
Date-time range validation is handled through the minDateTime and maxDateTime properties. If a user selects a date-time outside the allowed range, a validation error is displayed.
Example Usage
An event registration form that limits selection to a specific window:
{
"type": "dateTime",
"label": "Event Start",
"required": true,
"minDateTime": "2025-06-01T08:00",
"maxDateTime": "2025-06-30T20:00",
"timezoneMode": "utc",
"placeholder": "Select date and time"
}