mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 19:28:14 +08:00
docs(components): [time-picker] (#11657)
* docs(components): [time-picker] * Update time-picker docs with new syntax. * docs(components): [time-picker]
This commit is contained in:
Xc
GitHub
parent
d172535084
commit
f9094413d4
@ -43,48 +43,52 @@ time-picker/range
|
||||
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
## API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | -------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------- | ----------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
|
||||
| readonly | whether TimePicker is read only | boolean | — | false |
|
||||
| disabled | whether TimePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | large / default / small | — |
|
||||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start time in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | string | — | — |
|
||||
| is-range | whether to pick a time range | boolean | — | false |
|
||||
| arrow-control | whether to pick time using arrow buttons | boolean | — | false |
|
||||
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
|
||||
| range-separator | range separator | string | — | '-' |
|
||||
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | HH:mm:ss |
|
||||
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
|
||||
| id | same as `id` in native input | string / [string, string] | — | - |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Clock |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | Function(selectedHour) | — | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | Function(selectedHour, selectedMinute) | — | — |
|
||||
| teleported | whether time-picker dropdown is teleported to the body | boolean | true / false | true |
|
||||
### Attributes
|
||||
|
||||
## Events
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | — |
|
||||
| readonly | whether TimePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether TimePicker is disabled | ^[boolean] | false |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | — |
|
||||
| start-placeholder | placeholder for the start time in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | ^[string] | — |
|
||||
| is-range | whether to pick a time range | ^[boolean] | false |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| popper-class | custom class name for TimePicker's dropdown | ^[string] | — |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| default-value | optional, default date of the calendar | ^[Date] / ^[array]`[Date, Date]` | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[array]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| label ^(a11y) | same as `aria-label` in native input | ^[string] | — |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock |
|
||||
| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | 0 |
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| -------------- | ---------------------------------------------------------- | ----------------------- |
|
||||
| change | triggers when user confirms the value | `(val: typeof v-model)` |
|
||||
| blur | triggers when Input blurs | `(e: FocusEvent)` |
|
||||
| focus | triggers when Input focuses | `(e: FocusEvent)` |
|
||||
| visible-change | triggers when the TimePicker's dropdown appears/disappears | `(visibility: boolean)` |
|
||||
### Events
|
||||
|
||||
## Methods
|
||||
| Name | Description | Type |
|
||||
| -------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||
| change | triggers when user confirms the value | ^[Function]`(val: number \| string \| Date \| [number, number] \| [string, string] \| [Date, Date]) => void` |
|
||||
| blur | triggers when Input blurs | ^[Function]`(e: FocusEvent) => void` |
|
||||
| focus | triggers when Input focuses | ^[Function]`(e: FocusEvent) => void` |
|
||||
| visible-change | triggers when the TimePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` |
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ----------- | --------------------------- | ---------- |
|
||||
| focus | focus the Input component | — |
|
||||
| blur | blur the Input component | — |
|
||||
| handleOpen | open the TimePicker popper | — |
|
||||
| handleClose | close the TimePicker popper | — |
|
||||
### Exposes
|
||||
|
||||
| Name | Description | Type |
|
||||
| ----------- | --------------------------- | ------------------------------------------------- |
|
||||
| focus | focus the Input component | ^[Function]`(e: FocusEvent \| undefined) => void` |
|
||||
| blur | blur the Input component | ^[Function]`(e: FocusEvent \| undefined) => void` |
|
||||
| handleOpen | open the TimePicker popper | ^[Function]`() => void` |
|
||||
| handleClose | close the TimePicker popper | ^[Function]`() => void` |
|
||||
|
||||
@ -27,103 +27,193 @@ export type GetDisabledSeconds = (
|
||||
) => number[]
|
||||
|
||||
export const timePickerDefaultProps = buildProps({
|
||||
/**
|
||||
* @description same as `id` in native input
|
||||
*/
|
||||
id: {
|
||||
type: definePropType<SingleOrRange<string>>([Array, String]),
|
||||
},
|
||||
/**
|
||||
* @description same as `name` in native input
|
||||
*/
|
||||
name: {
|
||||
type: definePropType<SingleOrRange<string>>([Array, String]),
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description custom class name for TimePicker's dropdown
|
||||
*/
|
||||
popperClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description format of the displayed value in the input box
|
||||
*/
|
||||
format: String,
|
||||
/**
|
||||
* @description optional, format of binding value. If not specified, the binding value will be a Date object
|
||||
*/
|
||||
valueFormat: String,
|
||||
/**
|
||||
* @description type of the picker
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description whether to show clear button
|
||||
*/
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description Custom clear icon component
|
||||
*/
|
||||
clearIcon: {
|
||||
type: definePropType<string | Component>([String, Object]),
|
||||
default: CircleClose,
|
||||
},
|
||||
/**
|
||||
* @description whether the input is editable
|
||||
*/
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description Custom prefix icon component
|
||||
*/
|
||||
prefixIcon: {
|
||||
type: definePropType<string | Component>([String, Object]),
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description size of Input
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether TimePicker is read only
|
||||
*/
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description whether TimePicker is disabled
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description placeholder in non-range mode
|
||||
*/
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description [popper.js](https://popper.js.org/docs/v2/) parameters
|
||||
*/
|
||||
popperOptions: {
|
||||
type: definePropType<Partial<Options>>(Object),
|
||||
default: () => ({}),
|
||||
},
|
||||
/**
|
||||
* @description binding value, if it is an array, the length should be 2
|
||||
*/
|
||||
modelValue: {
|
||||
type: definePropType<ModelValueType>([Date, Array, String, Number]),
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description range separator
|
||||
*/
|
||||
rangeSeparator: {
|
||||
type: String,
|
||||
default: '-',
|
||||
},
|
||||
/**
|
||||
* @description placeholder for the start date in range mode
|
||||
*/
|
||||
startPlaceholder: String,
|
||||
/**
|
||||
* @description placeholder for the end date in range mode
|
||||
*/
|
||||
endPlaceholder: String,
|
||||
/**
|
||||
* @description optional, default date of the calendar
|
||||
*/
|
||||
defaultValue: {
|
||||
type: definePropType<SingleOrRange<Date>>([Date, Array]),
|
||||
},
|
||||
/**
|
||||
* @description optional, the time value to use when selecting date range
|
||||
*/
|
||||
defaultTime: {
|
||||
type: definePropType<SingleOrRange<Date>>([Date, Array]),
|
||||
},
|
||||
/**
|
||||
* @description whether to pick a time range
|
||||
*/
|
||||
isRange: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
...disabledTimeListsProps,
|
||||
/**
|
||||
* @description a function determining if a date is disabled with that date as its parameter. Should return a Boolean
|
||||
*/
|
||||
disabledDate: {
|
||||
type: Function,
|
||||
},
|
||||
/**
|
||||
* @description set custom className
|
||||
*/
|
||||
cellClassName: {
|
||||
type: Function,
|
||||
},
|
||||
/**
|
||||
* @description an object array to set shortcut options
|
||||
*/
|
||||
shortcuts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description whether to pick time using arrow buttons
|
||||
*/
|
||||
arrowControl: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description same as `aria-label` in native input
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description input tabindex
|
||||
*/
|
||||
tabindex: {
|
||||
type: definePropType<string | number>([String, Number]),
|
||||
default: 0,
|
||||
},
|
||||
/**
|
||||
* @description whether to trigger form validation
|
||||
*/
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description unlink two date-panels in range-picker
|
||||
*/
|
||||
unlinkPanels: Boolean,
|
||||
} as const)
|
||||
|
||||
|
||||
@ -17,12 +17,21 @@ export type GetDisabledSeconds = (
|
||||
) => number[]
|
||||
|
||||
export const disabledTimeListsProps = buildProps({
|
||||
/**
|
||||
* @description To specify the array of hours that cannot be selected
|
||||
*/
|
||||
disabledHours: {
|
||||
type: definePropType<GetDisabledHours>(Function),
|
||||
},
|
||||
/**
|
||||
* @description To specify the array of minutes that cannot be selected
|
||||
*/
|
||||
disabledMinutes: {
|
||||
type: definePropType<GetDisabledMinutes>(Function),
|
||||
},
|
||||
/**
|
||||
* @description To specify the array of seconds that cannot be selected
|
||||
*/
|
||||
disabledSeconds: {
|
||||
type: definePropType<GetDisabledSeconds>(Function),
|
||||
},
|
||||
|
||||
@ -13,6 +13,9 @@ export default defineComponent({
|
||||
install: null,
|
||||
props: {
|
||||
...timePickerDefaultProps,
|
||||
/**
|
||||
* @description whether to pick a time range
|
||||
*/
|
||||
isRange: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -29,25 +32,25 @@ export default defineComponent({
|
||||
provide('ElPopperOptions', props.popperOptions)
|
||||
ctx.expose({
|
||||
/**
|
||||
* @description focus on the input element
|
||||
* @description focus the Input component
|
||||
*/
|
||||
focus: (e: FocusEvent | undefined) => {
|
||||
commonPicker.value?.handleFocusInput(e)
|
||||
},
|
||||
/**
|
||||
* @description blur from the input element
|
||||
* @description blur the Input component
|
||||
*/
|
||||
blur: (e: FocusEvent | undefined) => {
|
||||
commonPicker.value?.handleBlurInput(e)
|
||||
},
|
||||
/**
|
||||
* @description opens the picker element
|
||||
* @description open the TimePicker popper
|
||||
*/
|
||||
handleOpen: () => {
|
||||
commonPicker.value?.handleOpen()
|
||||
},
|
||||
/**
|
||||
* @description closes the picker element
|
||||
* @description close the TimePicker popper
|
||||
*/
|
||||
handleClose: () => {
|
||||
commonPicker.value?.handleClose()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user