taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add link for individual props/events/slots/configs/icons

Browse Source
This commit is contained in:
Justineo
2021-10-20 01:11:27 +08:00
parent df2b6892d2
commit b0dcdbb873
162 changed files with 2176 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
one/docs/en-US/components/calendar.md
View File

@@ -10,13 +10,13 @@ Click to select a single date by default.
### Selecting multiple dates or a date range
You can select multiple date with the `multiple` prop set to `true` and can select a date range with the `range` prop set to `true`.
You can select multiple date with the [`multiple`](#props-multiple) prop set to `true` and can select a date range with the [`range`](#props-range) prop set to `true`.
[[ demo src="/demo/calendar/range-multiple.vue" ]]
### Selecting multiple date ranges
When `multiple` and `range` are both set to `true`, you can select multiple date ranges. You can configure the number of month panels with the `panel` prop. The way we merge newly selected ranges into those are already select are that, if you start select on a unselected date, the range will be selected and if start on a selected one, the range will be unselected.
When `multiple` and `range` are both set to `true`, you can select multiple date ranges. You can configure the number of month panels with the [`panel`](#props-panel) prop. The way we merge newly selected ranges into those are already select are that, if you start select on a unselected date, the range will be selected and if start on a selected one, the range will be unselected.
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
@@ -26,15 +26,15 @@ When `multiple` and `range` are both set to `true`, you can select multiple date
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `type` | `string=` | `'date'` | The type of the calendar. Available values include `'date'`/`'month'`/`'year'`, denoting date/month/year view respectively. When the value is not `'date'`, `multiple` and `range` will be ignored. |
| `type` | `string=` | `'date'` | The type of the calendar. Available values include `'date'` / `'month'` / `'year'`, denoting date/month/year view respectively. When the value is not `'date'`, `multiple` and `range` will be ignored. |
| `multiple` | `boolean=` | `false` | Whether users can select multiple dates (date ranges). |
| `range` | `boolean=` | `false` | Whether users can select a date range (date ranges). |
| `selected` | `Date|Array=` | - | [^selected] |
| `selected` | `Date | Array=` | - | [^selected] |
| `panel` | `number=` | `1` | The number of month panel displayed. |
| `today` | `Date=` | `new Date()` | The date of “today”. |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](#global-config). |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](#configs-calendar-weekStart). |
| `fill-month` | `boolean=` | `true` | Whether to show dates of previous and next month in current panel when there's only one month panel. |
| `date-class` | `string|Array|Object|function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string|Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| `date-class` | `string | Array | Object | function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string | Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| `disabled-date` | `function(Date, Date=): boolean=` | `() => false` | Used to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter. |
| `disabled` | `boolean=` | `false` | Whether the calendar is disabled. |
| `readonly` | `boolean=` | `false` | Whether the calendar is read-only. |
@@ -90,11 +90,11 @@ The content of each date cell. Displays the corresponding day of month by defaul
`v-model`
:::
Triggered when selection change. The callback parameter list is `(selected)`. The type of `selected` is the same as the `selected` prop.
Triggered when selection change. The callback parameter list is `(selected)`. The type of `selected` is the same as the [`selected`](#props-selected) prop.
^^^
^^^event-selectprogress
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the `multiple` prop.
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the [`multiple`](#props-multiple) prop.
+++Parameters types
| `multiple` | Type |
@@ -104,7 +104,7 @@ Triggered when selecting a date range and an end date is marked with pointer/key
+++
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |