ObjectUIComponentsForm
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
{
"type": "date-picker",
"placeholder": "Pick a date"
}With Default Date
With Default Value
{
"type": "date-picker",
"placeholder": "Pick a date",
"value": "2024-01-15"
}States
Disabled
{
"type": "date-picker",
"placeholder": "Pick a date",
"disabled": true
}Full Width
{
"type": "date-picker",
"placeholder": "Pick a date",
"className": "w-full"
}Schema
interface DatePickerSchema {
type: 'date-picker';
value?: string | Date; // Selected date (ISO string or Date)
placeholder?: string; // Placeholder text
// Events
onDateChange?: string | ActionConfig;
// States
disabled?: boolean;
// Styling
className?: string;
}Examples
In a Form
Form Field
{
"type": "flex",
"direction": "column",
"gap": 4,
"children": [
{
"type": "label",
"text": "Birth Date",
"htmlFor": "birthdate"
},
{
"type": "date-picker",
"id": "birthdate",
"placeholder": "Select your birth date"
}
]
}Date Range
Date Range Selector
{
"type": "flex",
"gap": 2,
"align": "center",
"children": [
{
"type": "date-picker",
"placeholder": "Start date"
},
{
"type": "text",
"value": "to"
},
{
"type": "date-picker",
"placeholder": "End date"
}
]
}