Date Picker
Trigger that opens a Calendar in a popup.
ui form
Preview
Installation
npx slintcn@latest add date-pickerUsage
import { DatePicker } from "slintcn/components/date-picker.slint";
DatePicker {
month-label: "May 2026";
days-in-month: 31;
first-day-offset: 5;
selected-day <=> day;
day-selected(d) => { day = d }
prev-month => { /* … */ }
next-month => { /* … */ }
Button { text: "Pick a date"; } // trigger = @children
}Properties
month-label
in
string
Header text inside the popup (e.g. "May 2026").
days-in-month
in
int
Number of days in the visible month.
first-day-offset
in
int
Day-of-week of day 1 (0 = Sun … 6 = Sat).
selected-day
in-out
int
Two-way; selected day-of-month (1 … days-in-month), or -1 for none.
content-width
in
length
Pixel width of the popup panel.
day-selected
callback
(int)
Fired with the chosen day; the popup closes automatically.
prev-month
callback
()
Forwarded from the inner Calendar header chevrons.
next-month
callback
()
—
API
Accessibility
focusablenoEscapedismissesDependencies
Installed automatically as transitive dependencies of slintcn add date-picker.