Atlas Forms
Date + Time Picker
The datetime type renders a combined date and time picker. It stores values as ISO 8601 datetime strings (e.g., 2025-12-25T14:30:00Z), supports timezone selection, 12h/24h clock modes, and minute interval snapping.
Minimal Example
{
"id": "scheduled-at",
"type": "datetime",
"label": "Scheduled At",
"required": true,
"width": "half",
"binding": {
"source": "$json",
"path": "task.scheduledAt"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
minDate | string | "now" | — | Earliest selectable datetime |
maxDate | string | "now" | — | Latest selectable datetime |
timeFormat | "12h" | "24h" | locale default | 12-hour (AM/PM) or 24-hour clock display |
minuteStep | number | 1 | Minute increment for the time picker (e.g., 15 for :00/:15/:30/:45) |
showSeconds | boolean | false | Include seconds selector in the time picker |
timezone | string (IANA) | UTC | Timezone for display (e.g., America/New_York) |
showTimezoneSelector | boolean | false | Render a timezone dropdown alongside the picker |
locale | string (BCP 47) | browser locale | Display locale for date formatting |
disabledDays | number[] | — | Day-of-week numbers to disable (0=Sun…6=Sat) |
showClearButton | boolean | true | Show × button to clear the selection |
Stored Value Format
Values are always stored as UTC ISO 8601 strings. Display is localised to the configured timezone:
// User in New York selects "Dec 25, 2025 at 9:00 AM"
// timezone setting: "America/New_York"
// Stored value (UTC): "2025-12-25T14:00:00Z"
// Displayed to user: "Dec 25, 2025, 9:00 AM EST"Appointment Scheduling Example
{
"id": "appointment-time",
"type": "datetime",
"label": "Appointment",
"description": "Business hours only (Mon–Fri, 9am–5pm)",
"width": "half",
"settings": {
"minDate": "now",
"timeFormat": "12h",
"minuteStep": 30,
"disabledDays": [0, 6],
"timezone": "America/Chicago",
"showTimezoneSelector": false
},
"validation": {
"required": true
},
"binding": {
"source": "$json",
"path": "booking.appointmentTime"
}
}12h vs 24h Clock
| timeFormat | Display Example | Typical Use |
|---|---|---|
"12h" | 2:30 PM | US, Canada, Australia |
"24h" | 14:30 | Europe, Asia, API/technical forms |
Minute Step Snapping
Use minuteStep to restrict selectable times to intervals, preventing arbitrary times on booking forms:
// Only allow on the hour or half-hour
"minuteStep": 30
// Selectable times: 9:00, 9:30, 10:00, 10:30, ...
// Only allow quarter-hours
"minuteStep": 15
// Selectable times: 9:00, 9:15, 9:30, 9:45, ...Timezone Selector
When showTimezoneSelector: true, a timezone dropdown renders alongside the picker. The selected timezone affects display only — the stored value is always UTC:
{
"id": "meeting-time",
"type": "datetime",
"label": "Meeting Time",
"settings": {
"showTimezoneSelector": true,
"timezone": "UTC",
"timeFormat": "24h",
"minuteStep": 15
}
}
// User selects timezone: "Europe/London"
// User picks: Jan 15, 2026, 10:00 (London time)
// Stored: "2026-01-15T10:00:00Z" (UTC = London in winter)Relative Minimum with "now"
Use "now" as a dynamic minDate that always evaluates to the current datetime at the time the form loads. This prevents selecting past times on event registration forms:
{
"id": "event-start",
"type": "datetime",
"label": "Event Start Time",
"settings": {
"minDate": "now",
"minuteStep": 30,
"timeFormat": "12h"
}
}
date vs datetime
Use
date when time is irrelevant (birthdays, deadlines, expiry dates). Use datetime when the exact time matters (appointments, scheduled tasks, event start times, log timestamps).