DatePicker
Rules
Basic Example
js
const rule = {
type: "DatePicker",
field: "section_day",
title: "Activity Date",
value: ['2018-02-20', '2021-02-15'],
props: {
type: "datetimerange",
format: "YYYY-MM-dd HH:mm:ss",
placeholder:"Select activity date",
}
}Props Configuration Examples
Date Selection
js
const rule = {
type: "DatePicker",
field: "date",
title: "Activity Date",
value: "2024-01-01",
props: {
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
placeholder: "Select date",
clearable: true,
}
}Date Time Selection
js
const rule = {
type: "DatePicker",
field: "datetime",
title: "Activity Time",
value: "2024-01-01 12:00:00",
props: {
type: "datetime",
format: "YYYY-MM-DD HH:mm:ss",
valueFormat: "YYYY-MM-DD HH:mm:ss",
placeholder: "Select date and time",
}
}Date Range Selection
js
const rule = {
type: "DatePicker",
field: "dateRange",
title: "Activity Period",
value: ["2024-01-01", "2024-01-31"],
props: {
type: "daterange",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
startPlaceholder: "Start Date",
endPlaceholder: "End Date",
}
}Limit Date Range
js
const rule = {
type: "DatePicker",
field: "date",
title: "Appointment Date",
value: "",
props: {
type: "date",
format: "YYYY-MM-DD",
disabledDate: (time) => {
// Disable dates before today
return time.getTime() < Date.now() - 8.64e7;
},
placeholder: "Select date",
}
}Shortcuts
js
const rule = {
type: "DatePicker",
field: "dateRange",
title: "Query Date",
value: [],
props: {
type: "daterange",
format: "YYYY-MM-DD",
shortcuts: [
{
text: 'Last Week',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: 'Last Month',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
],
}
}Events Examples
Listen to Date Changes
js
const rule = {
type: "DatePicker",
field: "date",
title: "Activity Date",
value: "",
props: {
type: "date",
format: "YYYY-MM-DD",
placeholder: "Select date",
},
on: {
change: (value) => {
console.log('Date changed:', value);
},
blur: (event) => {
console.log('Lost focus:', event);
},
focus: (event) => {
console.log('Gained focus:', event);
},
clear: () => {
console.log('Date cleared');
},
'visible-change': (visible) => {
console.log('Dropdown visibility:', visible);
},
},
}Complete configuration items: Element_DatePicker,Element_DateTimePicker
value: String | Array
DatePicker
Props
| Property Name | Description | Type | Default |
|---|---|---|---|
| readonly | Readonly | boolean | false |
| disabled | Disabled | boolean | false |
| size | Input size | enum | — |
| editable | Text box can be input | boolean | true |
| clearable | Whether to show clear button | boolean | true |
| placeholder | Placeholder content for non-range selection | string | '' |
| startPlaceholder | Placeholder content for start date in range selection | string | — |
| endPlaceholder | Placeholder content for end date in range selection | string | — |
| type | Display type | enum | date |
| format | Format displayed in input box | See date formats | YYYY-MM-DD |
| popperClass | Class name of DatePicker dropdown | string | — |
| popperOptions | Custom popper options, see popper.js for more | object | {} |
| rangeSeparator | Separator when selecting range | string | '-' |
| defaultValue | Optional, default time displayed when picker opens | object | — |
| defaultTime | Specific time of day used for selected date in range selection | object | — |
| valueFormat | Optional, format of bound value. If not specified, bound value is Date object | See date formats | — |
| id | Equivalent to native input id attribute | string / object | — |
| name | Equivalent to native input name attribute | string / object | '' |
| unlinkPanels | Unlink two date panels in range picker | boolean | false |
| prefixIcon | Custom prefix icon. If type value is TimeLikeType, then it's Clock, otherwise it's Calendar | string / object | '' |
| clearIcon | Custom clear icon | string / object | CircleClose |
| validateEvent | Whether to trigger form validation | boolean | true |
| disabledDate | Function to determine if date is disabled, accepts a Date object as parameter. Should return a Boolean value. | Function | — |
| shortcuts | Set shortcut options, need to pass array object | object | [] |
| cellClassName | Set custom class name | Function | — |
| teleported | Whether to insert date-picker dropdown list into body element | boolean | true |
| emptyValues | Component empty value configuration refer to config-provider | array | — |
| valueOnClear | Value when clearing options refer to config-provider | string / number / boolean / Function | — |
| fallbackPlacements | Available positions for Tooltip, see popper.js documentation | arrary | — |
| placement | Position where dropdown appears | Placement | bottom |
Events
| Event Name | Description | Type |
|---|---|---|
| change | Triggered when user confirms selected value | Function |
| blur | Triggered when component Input loses focus | Function |
| focus | Triggered when component Input gains focus | Function |
| clear | Triggered when user clicks clear button in clearable mode | Function |
| calendar-change | Triggered when calendar selected date changes | Function |
| panel-change | Triggered when date panel changes | Function |
| visible-change | Triggered when DatePicker dropdown appears/disappears | Function |
Slots
| Name | Description |
|---|---|
| default | Custom cell content |
| range-separator | Custom range separator content |
| prev-month | Previous month icon |
| next-month | Next month icon |
| prev-year | Previous year icon |
| next-year | Next year icon |
DateTimePicker (props.type:'datetime')
Props
| Property Name | Description | Type | Default Value |
|---|---|---|---|
| readonly | Readonly | boolean | false |
| disabled | Disabled | boolean | false |
| editable | Text box can be input | boolean | true |
| clearable | Whether to show clear button | boolean | true |
| size | Input size | enum | default |
| placeholder | Placeholder content for non-range selection | string | — |
| startPlaceholder | Placeholder content for start date in range selection | string | — |
| endElaceholder | Placeholder content for end date in range selection | string | — |
| arrowControl | Whether to use arrows for time selection | boolean | false |
| type | Display type | enum | date |
| format | Format displayed in input box | string see date formats | YYYY-MM-DD HH:mm:ss |
| popperClass | Class name of DateTimePicker dropdown | string | — |
| rangeSeparator | Separator when selecting range | string | '-' |
| defaultValue | Optional, default time displayed when picker opens | object | — |
| defaultTime | Default time value after selecting date. If not specified, default time value is 00:00:00 | object | — |
| valueFormat | Optional, format of bound value. If not specified, bound value is Date object | string see date formats | — |
| dateFormat | Optional, date format displayed in time picker dropdown list | string see date formats | — |
| timeFormat | Optional, time format displayed in time picker dropdown list | string see date formats | — |
| id | Equivalent to native input id attribute | string / object | — |
| name | Equivalent to native input name attribute | string | — |
| unlinkPanels | Unlink two date panels in range picker | boolean | false |
| prefixIcon | Custom prefix icon component | string / Component | Date |
| clearIcon | Custom clear icon | string / Component | CircleClose |
| shortcuts | Set shortcut options, need to pass array object | object | — |
| disabledDate | Function to determine if date is disabled, accepts a Date object as parameter. Should return a Boolean value. | Function | — |
| cellClassName | Set custom class name | Function | — |
| teleported | Whether to insert datetime-picker dropdown list into body element | boolean | true |
| emptyValues | Component empty value configuration refer to config-provider | array | — |
| valueOnClear | Value when clearing options refer to config-provider | string / number / boolean / Function | — |
| showNow | Whether to show now button | boolean | true |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Triggered when user confirms selected value | value |
| blur | Triggered when component Input loses focus | (e: FocusEvent) |
| focus | Triggered when component Input gains focus | (e: FocusEvent) |
| clear | Triggered when user clicks clear button in clearable mode | Function |
| calendar-change | If user hasn't selected a date, default to display current month. Callback executed after selecting calendar date, only effective for datetimerange | [Date, Date] |
| visible-change | Triggered when DateTimePicker dropdown appears/disappears | true when appears, false when hidden |
Slots
| Slot Name | Description |
|---|---|
| default | Custom cell content |
| range-separator | Custom range separator content |
| prev-month | Previous month icon |
| next-month | Next month icon |
| prev-year | Previous year icon |
| next-year | Next year icon |