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

76
one/docs/en-US/components/date-picker.md
View File

@@ -4,7 +4,7 @@
### Selecting a single date
By default, you can click a date cell in the dropdown overlay to select a single date. Use the `clearable` prop to make selected values clearable. Use the `placeholder` prop to customize the description text displayed when nothing is selected yet.
By default, you can click a date cell in the dropdown overlay to select a single date. Use the [`clearable`](#props-clearable) prop to make selected values clearable. Use the [`placeholder`](#props-placeholder) prop to customize the description text displayed when nothing is selected yet.
[[ demo src="/demo/date-picker/default.vue" ]]
@@ -16,7 +16,7 @@ When `range` is `true`, you can select a date range in the dropdown overlay.
### Setting selection shortcuts
When selecting a date range, the `shortcuts` prop can be used to provide predefined date range shortcuts to be selected from.
When selecting a date range, the [`shortcuts`](#props-shortcuts) prop can be used to provide predefined date range shortcuts to be selected from.
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
@@ -26,23 +26,23 @@ When selecting a date range, the `shortcuts` prop can be used to provide predefi
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `range` | `boolean=` | `false` | Whether users can select a date range. When the value is not `'date'`, `range` will be ignored. |
| `selected` | `Date|Array=` | - | [^selected] |
| `panel` | `number=` | `1` | The number of month panel displayed in the dropdown overlay. |
| `today` | `Date=` | `new Date()` | The date of “today”. |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](./calendar#global-config). |
| `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. |
| `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. |
| `clearable` | `boolean=` | `false` | Whether selected date (ranges) can be cleared. |
| `placeholder` | `string=` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | The placeholder text displayed when nothing is selected. Can be [globally configured](./calendar#global-config). |
| `format` | `string|function(Date): string=` | `'YYYY-MM-DD'` | When being string type, denotes the format expression for displaying final selected date (ranges). See details at [the documentation of date-fns](https://date-fns.org/v1.29.0/docs/format). Can also be a function to customize the formatting logic. |
| `parse` | `function(string): Date=` | Custom function to parse the input string expressions into `Date` objects. |
| `shortcuts` | `Array<Object>=` | `datepicker.shortcuts` | [^shortcuts] |
| `shortcuts-position` | `string=` | `datepicker.shortcutsPosition` | The position of shortcuts. Can be either `'before'` or `'after'`, corresponding to the before or after the content of the month panel respectively. Can be [globally configured](./calendar#global-config). |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the date picker is disabled. |
| `readonly` | `boolean=` | `false` | Whether the date picker is read-only. |
| ``range`` | `boolean=` | `false` | Whether users can select a date range. When the value is not `'date'`, `range` will be ignored. |
| ``selected`` | `Date | Array=` | - | [^selected] |
| ``panel`` | `number=` | `1` | The number of month panel displayed in the dropdown overlay. |
| ``today`` | `Date=` | `new Date()` | The date of “today”. |
| ``week-start`` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](./calendar#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. |
| ``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. |
| ``clearable`` | `boolean=` | `false` | Whether selected date (ranges) can be cleared. |
| ``placeholder`` | `string=` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | The placeholder text displayed when nothing is selected. Can be globally configured respectively for both [range](#configs-datepicker-rangePlaceholder) and [single date](#configs-datepicker-placeholder). |
| ``format`` | `string | function(Date): string=` | `'YYYY-MM-DD'` | When being string type, denotes the format expression for displaying final selected date (ranges). See details at [the documentation of date-fns](https://date-fns.org/v1.29.0/docs/format). Can also be a function to customize the formatting logic. |
| ``parse`` | `function(string): Date=` | Custom function to parse the input string expressions into `Date` objects. |
| ``shortcuts`` | `Array<Object>=` | `datepicker.shortcuts` | [^shortcuts] |
(#configs-datepicker-shortcutsPosition). |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | Whether the date picker is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the date picker is read-only. |
^^^selected
:::badges
@@ -60,7 +60,7 @@ The selected date (range). Value type is determined by whether `range` is `true`
^^^
^^^shortcuts
Selection shortcuts can be custmized when selecting a date range. The data type is `Array<{label, from, to}>`. Can be [globally configured](./calendar#global-config).
Selection shortcuts can be custmized when selecting a date range. The data type is `Array<{label, from, to}>`. Can be [globally configured](#configs-datepicker-shortcuts).
+++Properties
<table>
@@ -92,7 +92,7 @@ Selection shortcuts can be custmized when selecting a date range. The data type
#### Date offset format for shortcut option
The `from` and `to` property in `shortcuts` options, which are used to calculate the start/end date of an shortcut option, share the same format which is `number|Object` and default to `0`.
The `from` and `to` property in `shortcuts` options, which are used to calculate the start/end date of an shortcut option, share the same format which is `number | Object` and default to `0`.
* `number` values are the offset in days calculated against “today”. eg. `-1` means `{ startOf: 'day', days: -1 }`, which is “yesterday”.
* `Object` values have the type of `{startOf: string=, days: number=, weeks: number=, months: number=, }`.
@@ -100,7 +100,7 @@ The `from` and `to` property in `shortcuts` options, which are used to calculate
+++Properties
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `startOf` | `string=` | `'day'` | The base date. Supported values include `'day'`/`'week'`/`'month'`/`'quarter'`/`'year'`. |
| `startOf` | `string=` | `'day'` | The base date. Supported values include `'day'` / `'week'` / `'month'` / `'quarter'` / `'year'`. |
| `day` | `number=` | - | Offset in days. |
| `week` | `number=` | - | Offset in weeks. |
| `month` | `number=` | - | Offset in months. |
@@ -173,7 +173,7 @@ Whether the dropdown overlay is expanded.
| Name | Description |
| -- | -- |
| `date` | [^slot-date] |
| ``date`` | [^slot-date] |
^^^slot-date
The content of each date cell in the dropdown overlay. Displays the corresponding day of month by default.
@@ -191,21 +191,21 @@ The content of each date cell in the dropdown overlay. Displays the correspondin
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| `selectstart` | Triggered when selecting a date range and a start date is selected. The callback parameter list is `(picking: Date)`, being the selected start date. |
| `selectprogress` | [^event-selectprogress] |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown overlay is to be expanded or collapsed. |
| ``select`` | [^event-select] |
| ``selectstart`` | Triggered when selecting a date range and a start date is selected. The callback parameter list is `(picking: Date)`, being the selected start date. |
| ``selectprogress`` | [^event-selectprogress] |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown overlay is to be expanded or collapsed. |
^^^event-select
:::badges
`v-model`
:::
Triggered when the selected date (range) is changed. The callback parameter list is `(selected)` with `selected` having the same type with the `selected` prop.
Triggered when the selected date (range) is changed. The callback parameter list is `(selected)` with `selected` having the same type with 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 |
@@ -215,16 +215,16 @@ Triggered when selecting a date range and an end date is marked with pointer/key
+++
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `datepicker.shortcuts` | `Array` | `[]` | Default shortcut options. |
| `datepicker.shortcutsPosition` | `string` | `'before'` | Shows the shortcut options before or after month panels. Corresponds to `'before'` and `'after'` respectively. |
| `datepicker.placeholder` | `string` | `@@datepicker.selectDate` | Placeholder text displayed when selecting a single date. |
| `datepicker.monthPlaceholder` | `string` | `@@datepicker.selectMonth` | Placeholder text displayed when selecting a month. |
| `datepicker.yearPlaceholder` | `string` | `@@datepicker.selectYear` | Placeholder text displayed when selecting a year. |
| `datepicker.rangePlaceholder` | `string` | `@@datepicker.selectRange` | Placeholder text displayed when selecting a date range. |
| ``datepicker.shortcuts`` | `Array` | `[]` | Default shortcut options. |
| ``datepicker.shortcutsPosition`` | `string` | `'before'` | Shows the shortcut options before or after month panels. Corresponds to `'before'` and `'after'` respectively. |
| ``datepicker.placeholder`` | `string` | `@@datepicker.selectDate` | Placeholder text displayed when selecting a single date. |
| ``datepicker.monthPlaceholder`` | `string` | `@@datepicker.selectMonth` | Placeholder text displayed when selecting a month. |
| ``datepicker.yearPlaceholder`` | `string` | `@@datepicker.selectYear` | Placeholder text displayed when selecting a year. |
| ``datepicker.rangePlaceholder`` | `string` | `@@datepicker.selectRange` | Placeholder text displayed when selecting a date range. |
:::tip
`@@` prefixed values denote corresponding properties in the locale settings.
@@ -234,5 +234,5 @@ Triggered when selecting a date range and an end date is marked with pointer/key
| Name | Description |
| -- | -- |
| `calendar` | Calendar. |
| `clear` | Clear selection. |
| ``calendar`` | Calendar. |
| ``clear`` | Clear selection. |