| model-value / v-model | binding value, if it is an range picker, the length of the array should be 2 | ^[number] / ^[string] / ^[Date] / ^[array]number[] | string[] | Date[] | '' |
| readonly | whether DatePicker is read only | ^[boolean] | false |
| disabled | whether DatePicker is disabled | ^[boolean] | false |
| size | size of Input | ^[enum]'' | 'large' | 'default' | 'small' | — |
| editable | whether the input is editable | ^[boolean] | true |
| clearable | whether to show clear button | ^[boolean] | true |
| placeholder | placeholder in non-range mode | ^[string] | '' |
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
| type | type of the picker | ^[enum]'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange' | date |
| format | format of the displayed value in the input box | ^[string] see date formats | YYYY-MM-DD |
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
| popper-style | custom style for DatePicker's dropdown | ^[string] / ^[object] | — |
| popper-options | Customized popper option see more at popper.js | ^[object]Partial<PopperOptions> | {} |
| range-separator | range separator | ^[string] | '-' |
| default-value | optional, default date of the calendar | ^[object]Date | [Date, Date] | — |
| default-time | optional, the time value to use when selecting date range | ^[object]Date | [Date, Date] | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see date formats | — |
| id | same as id in native input | ^[string] / ^[array][string, string] | — |
| name | same as name in native input | ^[string] / ^[array][string, string] | '' |
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
| prefix-icon | custom prefix icon component. By default, if the value of type is TimeLikeType, the value is Clock, else is Calendar | ^[string] / ^[object]Component | '' |
| clear-icon | custom clear icon component | ^[string] / ^[object]Component | CircleClose |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function](data: Date) => boolean | — |
| shortcuts | an object array to set shortcut options | ^[array]Array<{ text: string, value: Date | Function }> | [] |
| cell-class-name | set custom className | ^[Function](data: Date) => string | — |
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |
| empty-values ^(2.7.0) | empty values of component, see config-provider | ^[array] | — |
| value-on-clear ^(2.7.0) | clear return value, see config-provider | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip popper.js | ^[array]Placement[] | ['bottom', 'top', 'right', 'left'] |
| placement ^(2.8.4) | position of dropdown | Placement | bottom |
| show-footer ^(2.10.5) | whether to show footer | ^[boolean] | true |
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
| show-week-number ^(2.10.3) | show the week number besides the week | ^[boolean] | false |
| automatic-dropdown ^(2.11.4) | this prop decides if the date picker panel pops up when the input is focused. (The default value will be set to false in version 3.0) | ^[boolean] | true |
