Date Picker
A date picker that combines a trigger button with a Calendar in a floating dropdown.
Single Date
Click the button to open a calendar. Select a date to populate the field.
Date Range
Select a start and end date. Shows two months side by side.
Pre-selected Date
A date picker with a date already selected.
Usage
julia
using Suite
# Simple date picker
DatePicker()
# Range picker with two months
DatePicker(mode="range", number_of_months=2, placeholder="Select dates")
# Pre-selected date
DatePicker(selected="2026-02-14")
# Custom placeholder
DatePicker(placeholder="Choose a birthday")
# Disabled dates
DatePicker(disabled_dates="2026-02-14,2026-02-15")Composition
DatePicker is a composition of a trigger button with a Calendar inside a floating dropdown. For more control, you can compose these yourself using Popover + Calendar.
julia
# Manual composition with Popover + Calendar
Popover(
PopoverTrigger(Button(variant="outline", "Pick a date")),
PopoverContent(class="w-auto p-0",
Calendar(mode="single")
)
)Keyboard Interactions
| Key | Action |
|---|---|
| Space / Enter | Open calendar (on trigger button) |
| Escape | Close calendar and return focus to trigger |
| Arrow keys | Navigate days in the calendar grid |
| PageUp / PageDown | Navigate months |
| Space / Enter | Select focused date (in calendar) |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | String | "single" | Selection mode: single, multiple, or range |
| month | Int | current month | Initial displayed month (1-12) |
| year | Int | current year | Initial displayed year |
| selected | String | "" | Pre-selected date(s), comma-separated ISO strings |
| placeholder | String | "Pick a date" | Trigger button text when no date selected |
| disabled_dates | String | "" | Disabled dates, comma-separated ISO strings |
| show_outside_days | Bool | true | Show days from adjacent months |
| number_of_months | Int | 1 | Number of months to display |
| class | String | "" | Additional CSS classes for the trigger button |
| theme | Symbol | :default | Theme preset |