mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [calendar] (#10977)

Browse Source 
* docs(components): [calendar]

* Update calendar docs with new syntax.
* Update description for calendar APIs.

* chore: remove backquote for API names

* chore: update scoped slots

* chore: apply suggestion

---------

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Jeremy 2023-02-14 22:29:36 +08:00 committed by GitHub
parent cc3cc854e8
commit 8c2a2a69dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/en-US/component/calendar.md
View File

@ -45,16 +45,18 @@ The default locale of is English, if you need to use other languages, please che
Note, date time locale (month name, first day of the week ...) are also configured in localization.
## Attributes
## API
| Name | Description | Type | Default |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- |
| `model-value / v-model` | binding value | `Date` | — |
| `range` | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | `[Date, Date]` | — |
### Attributes
## Slots
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | ^[Date] | — |
| range | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | ^[array]`[Date, Date]` | — |
| Name | Description | Type |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `date-cell` | `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | `{ type: 'prev-month' \| 'current-month' \| 'next-month', isSelected: boolean, day: string, date: Date }` |
| `header` | content of the Calendar header | — |
### Slots
| Name | Description | Type |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| date-cell | `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format `YYYY-MM-DD`; `date` is date the cell represents | ^[object]`{ data: { type: 'prev-month' \| 'current-month' \| 'next-month', isSelected: boolean, day: string, date: Date } }` |
| header | content of the Calendar header | ^[object]`{ date: string }` |

7
packages/components/calendar/src/calendar.ts
View File

@ -18,9 +18,16 @@ const isValidRange = (range: unknown): range is [Date, Date] =>
isArray(range) && range.length === 2 && range.every((item) => isDate(item))
export const calendarProps = buildProps({
/**
* @description binding value
*/
modelValue: {
type: Date,
},
/**
* @description time range, including start time and end time.
* Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.
*/
range: {
type: definePropType<[Date, Date]>(Array),
validator: isValidRange,