mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update date picker doc

Browse Source
This commit is contained in:
iamkun 2020-12-08 22:17:20 +08:00 committed by hangzou
parent 3f99b335e5
commit 96e0e89778
5 changed files with 78 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
website/docs/en-US/date-picker.md
View File

@ -7,7 +7,7 @@ Use Date Picker for date input.
Basic date picker measured by 'day'.
:::demo The measurement is determined by the `type` attribute. You can enable quick options by creating a `picker-options` object with `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
:::demo The measurement is determined by the `type` attribute. You can enable quick options via `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
```html
<template>
@ -406,22 +406,8 @@ When picking a date range, you can assign the time part for start date and end d
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| validate-event | whether to trigger form validation | boolean | - | true |
### Picker Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### shortcuts
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | title of the shortcut | string | — | — |
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
### Events
| Event Name | Description | Parameters |

18
website/docs/es/date-picker.md
View File

@ -7,7 +7,7 @@ Utilice Date Picker para introducir la fecha.
Date Picker básico por "día".
:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.
:::demo La medida está determinada por el atributo `type` . You can enable quick options via `shortcuts` property. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.
```html
@ -410,22 +410,8 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
| prefix-icon | Clase personalizada para el icono prefijado | string | — | el-icon-date |
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
### Opciones del Picker
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
| firstDayOfWeek | primer día de la semana | Number | 1 to 7 | 7 |
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Accesso directo
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| text | título del acceso directo | string | — | — |
| onClick | una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
| shortcuts | un array de objetos para establecer opciones de acceso directo | object[{ text: string, value: Date }] | — | — |
### Eventos
| Nombre | Descripción | Parametros |

11
website/docs/fr-FR/date-picker.md
View File

@ -6,7 +6,7 @@ Utilisez DatePicker pour les champs de dates.
L'unité de base du DatePicker est le jour.
:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.
:::demo L'unité est déterminée par l'attribut `type`. You can enable quick options via `shortcuts` property. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.
```html
<template>
@ -408,15 +408,8 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
### Options du Picker
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
| shortcuts | Un tableau d'objets pour configurer les raccourcis | object[{ text: string, value: Date }] | — | — |
### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut |

156
website/docs/jp/date-picker.md
View File

@ -6,7 +6,7 @@
'日'で計測する基本的なdate-picker。
:::demo 測定は `type` 属性で決定されます。クイックオプションを有効にするには、`shortcuts` プロパティを持つ `picker-options` オブジェクトを作成する。無効な日付は関数 `disabledDate` で設定する。
:::demo 測定は `type` 属性で決定されます。You can enable quick options via `shortcuts` property。無効な日付は関数 `disabledDate` で設定する。
```html
<template>
@ -24,7 +24,8 @@
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions">
:disabled-date="disabledDate"
:shortcuts="shortcuts">
</el-date-picker>
</div>
</template>
@ -33,31 +34,27 @@
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
}, {
text: 'A week ago',
value: (() => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
}],
value1: '',
value2: '',
};
@ -156,7 +153,7 @@
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
</template>
@ -165,33 +162,31 @@
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last month',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 3 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
shortcuts: [{
text: 'Last week',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
}, {
text: 'Last month',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
}, {
text: 'Last 3 months',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
}],
value1: '',
value2: ''
};
@ -229,7 +224,7 @@
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
</template>
@ -238,29 +233,25 @@
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'This month',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: 'This year',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 6 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
shortcuts: [{
text: 'This month',
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
}, {
text: 'Last 6 months',
value: (() => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
}],
value1: '',
value2: ''
};
@ -413,15 +404,8 @@ Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-avai
| prefix-icon | カスタムプレフィックスアイコン | string | — | el-icon-date |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
| validate-event | フォームバリデーションをトリガするかどうか | boolean | - | true |
### ピッカーオプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | ショートカットオプションを設定するための { text, onClick } オブジェクトの配列は、以下の表を確認してください。 | object[] | — | — |
| shortcuts | ショートカットオプションを設定するためのオブジェクトの配列は | object[{ text: string, value: Date }] | — | — |
| disabledDate | 日付をパラメータとして、その日付が無効化されているかどうかを判断する関数です。ブーリアンを返す必要があります。 | function | — | — |
| cellClassName | セットカスタムクラス名 | Function(Date) | — | — |
| firstDayOfWeek | 週の初日 | Number | 1 to 7 | 7 |
| onPick | 選択された日付が変更されたときにトリガーするコールバックです。`daterange` と `datetimerange` のみ。 | Function({ maxDate, minDate }) | - | - |
### ショートカット
| Attribute | Description | Type | Accepted Values | Default |

11
website/docs/zh-CN/date-picker.md
View File

@ -7,7 +7,7 @@
以「日」为基本单位，基础的日期选择控件
:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`，禁用日期通过 `disabledDate` 设置，传入函数
:::demo 基本单位由`type`属性指定。通过`shortcuts`配置快捷选项，禁用日期通过 `disabledDate` 设置，传入函数
```html
<template>
<div class="block">
@ -406,15 +406,8 @@ If type is `daterange`, `default-value` sets the left side calendar.
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
### Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| shortcuts | 设置快捷选项，需要传入数组对象 | object[{ text: string, value: Date }] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 设置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |