Date Field
Date picker with optional time selection.
Date Field
The date field renders a date picker with optional time selection.
Schema Properties
Prop
Type
UI Options
Same as Text Field.
Basic Usage
const schema = defineSchema({
fields: [
{
type: "date",
name: "birthDate",
label: "Birth Date",
required: true,
},
],
});With Time Picker
{
type: "date",
name: "meetingTime",
label: "Meeting Time",
withTime: true,
required: true,
}Date Constraints
{
type: "date",
name: "eventDate",
label: "Event Date",
minDate: new Date().toISOString().split("T")[0], // Today
maxDate: "2025-12-31",
}Examples
Date Range
const schema = defineSchema({
fields: [
{
type: "date",
name: "startDate",
label: "Start Date",
required: true,
},
{
type: "date",
name: "endDate",
label: "End Date",
required: true,
minDate: "{ $data: '/startDate' }", // After start date
},
],
});Birthday Picker
{
type: "date",
name: "birthDate",
label: "Date of Birth",
minDate: "1900-01-01",
maxDate: new Date().toISOString().split("T")[0],
}Auto-Derived Validators
| Property | Validator |
|---|---|
required: true | required |
minDate | minDate |
maxDate | maxDate |
Value Format
- Without time:
YYYY-MM-DD(e.g.,"2024-01-15") - With time: Full ISO datetime (e.g.,
"2024-01-15T10:30:00.000Z")