Date Picker
Input for selecting dates with a calendar popup
The Date Picker component allows users to select a date from a calendar interface.
Basic Usage
Basic Date Picker
With Default Date
With Default Value
The calendar popup opens on the month of the selected date, so a date in another month or year is in view when the popup opens. With no date it opens on the current month.
States
Disabled
Full Width
Schema
interface DatePickerSchema {
type: 'date-picker';
value?: string | Date; // Selected date (ISO string or Date)
placeholder?: string; // Placeholder text
// Events
// RUNTIME SLOT (objectui#6124): a React host supplies it; JSON refuses it
// by name. Author behaviour as a node type, e.g. an action:button node.
onChange?: (date: Date | undefined) => void;
// States
disabled?: boolean | string | { dialect?: string; source: string }; // boolean, predicate expression, or CEL envelope
// Styling
className?: string;
wrapperClass?: string;
}wrapperClass is now typed. The renderer has read it all along — it lands on the
wrapper element around the date picker and its label — but it went undeclared until
objectui#7722, surviving on what was then BaseSchema's index signature (objectui#8347 removed it) and the zod mirror's
.passthrough(). Declared as string on both faces, a non-string
wrapperClass that used to parse green is now refused by name — on
DatePickerSchema and through safeValidateSchema alike. Pass the Tailwind class
string; a number or an object gets a parse error where it used to get silence.