Select a date from a calendar popover.
Preview
code
1[YYYY-MM-DD ��▼]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeDatePicker,3 Name: "birthday",4 Placeholder: "Select date",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "date-picker" | Node type | required |
name | string | Form field name | required |
placeholder | string | Placeholder text | - |
defaultValue | string | Initial ISO date (e.g., 2024-01-31) | - |
min | string | Earliest selectable ISO date (inclusive) | - |
max | string | Latest selectable ISO date (inclusive) | - |
disabled | boolean | Disable interactions | false |
clearable | boolean | Show clear button to unset value | false |
required | boolean | Mark as required | false |
variant | string | Visual style: solid, soft, outline, ghost | "outline" |
size | string | Control size token | "md" |
pill | boolean | Fully rounded pill shape | false |
block | boolean | Extend to 100% width | false |
side | string | Calendar position: top, bottom, left, right | - |
align | string | Calendar alignment: start, center, end | "center" |
onChangeAction | ActionConfig | Action dispatched on date change | - |
Examples
Basic DatePicker
go
1{2 Type: models.WidgetNodeTypeDatePicker,3 Name: "date",4 Placeholder: "Select a date",5}With Default Value
go
1{2 Type: models.WidgetNodeTypeDatePicker,3 Name: "start_date",4 DefaultValue: "2024-01-15",5}Date Range Constraints
go
1{2 Type: models.WidgetNodeTypeDatePicker,3 Name: "booking_date",4 Placeholder: "Choose date",5 Min: "2024-01-01",6 Max: "2024-12-31",7}With Label
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeLabel, Value: "Date of Birth", FieldName: "dob"},6 {7 Type: models.WidgetNodeTypeDatePicker,8 Name: "dob",9 Placeholder: "YYYY-MM-DD",10 Max: "2010-01-01", // Must be at least 14 years old11 Clearable: true,12 },13 },14}Booking Form
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "Book Appointment",4 Interactive: true,5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeCol,8 Gap: 3,9 Children: []models.WidgetNode{10 {Type: models.WidgetNodeTypeDatePicker, Name: "date", Placeholder: "Select date", Required: true},11 {Type: models.WidgetNodeTypeSelect, Name: "time", Placeholder: "Select time", Options: []models.WidgetSelectOption{12 {Label: "9:00 AM", Value: "09:00"},13 {Label: "10:00 AM", Value: "10:00"},14 {Label: "11:00 AM", Value: "11:00"},15 }},16 },17 },18 },19 Actions: []models.WidgetActionButton{20 {Label: "Book", Action: models.WidgetAction{Type: "book_appointment"}},21 },22}Form Data
The selected date is included as an ISO date string:
json
1{2 "date": "2024-06-15",3 "dob": "1990-05-20"4}TypeScript
typescript
1const node: WidgetNode = {2 type: "date-picker",3 name: "date",4 placeholder: "Select date",5 min: "2024-01-01",6 max: "2024-12-31",7}Best Practices
- Use ISO format - Always
YYYY-MM-DDfor dates - Set reasonable constraints - Use
min/maxto prevent invalid selections - Provide placeholder - Guide users on expected format
- Consider timezone - Dates are date-only, not datetime