Skip to content

Commit

Permalink
docs(components): [date-picker] use new dispaly tag (element-plus#14754)
Browse files Browse the repository at this point in the history 
* refactor(components): [time-picker] update  boolean attr are declared

* docs(components): [date-picker] use new dispaly tag

* docs(components): [date-picker] delete extra description
  • Loading branch information
@ikkkp
ikkkp committed Jan 6, 2024
1 parent 2bb71f6 commit 1329f25
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 260 deletions.
55 changes: 55 additions & 0 deletions docs/en-US/component/date-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,40 @@ Note, date time locale (month name, first day of the week ...) are also configur

## API

### Attributes
## API

### Attributes

| 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] \| [string, string]` | '' |
| 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' \| 'month' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange'` | date |
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[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](/en-US/component/date-picker#date-formats) | — |
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
| name | same as `name` in native input | ^[string] / ^[object]`[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 | ^[object]`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 |
| 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] \| [string, string]` | '' |
Expand Down Expand Up @@ -177,6 +209,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |

### Events
### Events

| Name | Description | Type |
Expand All @@ -188,6 +221,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
| panel-change | triggers when the navigation button click. | ^[Function]`(date: Date \| [Date, Date], mode: 'month' \| 'year', view?: string) => void` |
| visible-change | triggers when the DatePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` |

### Slots
### Slots

| Name | Description |
Expand Down Expand Up @@ -215,3 +249,24 @@ type TimeLikeType = 'datetime' | 'datetimerange'
```
</details>
### Exposes
| Name | Description | Type |
| --------------------- | --------------------------- | ------------------------------------------------------------------------------ |
| focus | focus the Input component | ^[Function]`(focusStartInput?: boolean, isIgnoreFocusEvent?: boolean) => void` |
| handleOpen ^(2.2.16) | open the DatePicker popper | ^[Function]`() => void` |
| handleClose ^(2.2.16) | close the DatePicker popper | ^[Function]`() => void` |
## Type Declarations
<details>
<summary>Show declarations</summary>
```ts
import type { Options as PopperOptions } from '@popperjs/core'

type TimeLikeType = 'datetime' | 'datetimerange'
```
</details>
Loading

0 comments on commit 1329f25

Please sign in to comment.