Atlas Forms
Date Picker
The date type renders a calendar date picker. It stores dates in ISO 8601 format (YYYY-MM-DD) internally, displays them in the user's locale, and supports minimum/maximum date constraints, relative date defaults, and locale-aware formatting.
Minimal Example
{
"id": "start-date",
"type": "date",
"label": "Start Date",
"required": true,
"width": "half",
"binding": {
"source": "$json",
"path": "project.startDate"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
minDate | string | "today" | — | Earliest selectable date. ISO string or "today" |
maxDate | string | "today" | — | Latest selectable date. ISO string or "today" |
format | string | locale default | Display format string (e.g., MM/DD/YYYY, DD-MMM-YYYY) |
locale | string (BCP 47) | browser locale | Override display locale (e.g., en-GB, fr-FR) |
firstDayOfWeek | 0–6 | locale default | 0 = Sunday, 1 = Monday, etc. |
disabledDays | number[] | — | Day-of-week numbers to disable (0=Sun…6=Sat) |
disabledDates | string[] | — | Specific ISO dates to disable (e.g., public holidays) |
showClearButton | boolean | true | Show × button to clear the selected date |
showTodayButton | boolean | false | Show a "Today" shortcut button in the picker |
yearRange | [number, number] | [1900, 2100] | Year selector range |
Stored Value Format
The date picker always stores dates as YYYY-MM-DD strings, regardless of the display format. This ensures consistent data across locales:
// User sees: 25/12/2025 (en-GB locale)
// Stored: "2025-12-25"
// User sees: December 25, 2025 (en-US locale)
// Stored: "2025-12-25"Date Constraints
Use "today" as a relative reference for dynamic constraints:
// Birth date — must be in the past
{
"id": "date-of-birth",
"type": "date",
"label": "Date of Birth",
"settings": {
"maxDate": "today",
"yearRange": [1900, 2010],
"showTodayButton": false
},
"validation": {
"required": true
}
}
// Appointment — must be in the future, weekdays only
{
"id": "appointment-date",
"type": "date",
"label": "Appointment Date",
"settings": {
"minDate": "today",
"disabledDays": [0, 6],
"showTodayButton": true
}
}Date Range with Two Pickers
Implement a start/end date range by linking the minDate of the end picker to the value of the start picker using a visibilityRule-style expression or a dynamic default:
{
"id": "contract-start",
"type": "date",
"label": "Contract Start",
"width": "half",
"order": 1,
"settings": {
"minDate": "today"
},
"binding": { "source": "$json", "path": "contract.startDate" }
},
{
"id": "contract-end",
"type": "date",
"label": "Contract End",
"width": "half",
"order": 2,
"settings": {
"minDate": "{{values.contract-start}}",
"showTodayButton": false
},
"validation": {
"required": true
},
"binding": { "source": "$json", "path": "contract.endDate" }
}Locale and Format Examples
| Locale | Format Example | Display |
|---|---|---|
en-US | MM/DD/YYYY | 12/25/2025 |
en-GB | DD/MM/YYYY | 25/12/2025 |
fr-FR | DD/MM/YYYY | 25/12/2025 |
de-DE | DD.MM.YYYY | 25.12.2025 |
ja-JP | YYYY/MM/DD | 2025/12/25 |
Disabling Specific Dates
{
"id": "delivery-date",
"type": "date",
"label": "Delivery Date",
"settings": {
"minDate": "today",
"disabledDays": [0, 6],
"disabledDates": [
"2025-12-25",
"2026-01-01",
"2026-04-06"
]
}
}
defaultValue with Dates
Use an ISO date string for a fixed default, or
"today" to default to the current date when the form loads: "defaultValue": "today".