javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update date time picker doc (#1033)

Browse Source
This commit is contained in:
iamkun
2020-12-18 10:04:48 +08:00
committed by GitHub
parent eeb55e54da
commit 21af6e64c6
9 changed files with 253 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
website/docs/en-US/datetime-picker.md
View File

@@ -26,7 +26,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
v-model="value2"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
<div class="block">
@@ -44,28 +44,24 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
export default {
data() {
return {
pickerOptions: {
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);
}
}]
},
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
value1: '',
value2: '',
value3: ''
@@ -97,7 +93,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
:shortcuts="shortcuts""
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
@@ -110,33 +106,31 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};

96
website/docs/es/datetime-picker.md
View File

@@ -27,7 +27,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
v-model="value2"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
<div class="block">
@@ -45,28 +45,24 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
export default {
data() {
return {
pickerOptions: {
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);
}
}]
},
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
value1: '',
value2: '',
value3: ''
@@ -98,7 +94,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
:shortcuts="shortcuts""
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
@@ -111,33 +107,31 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};

96
website/docs/fr-FR/datetime-picker.md
View File

@@ -26,7 +26,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
v-model="value2"
type="datetime"
placeholder="Selectionnez date et horaire"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
<div class="block">
@@ -44,28 +44,24 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Aujourdh\'ui',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Hier',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.emit('pick', date);
}
}, {
text: 'Il y a une semaine',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.emit('pick', date);
}
}]
},
shortcuts: [{
text: 'Aujourdh\'ui',
value: new Date(),
}, {
text: 'Hier',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
text: 'Il y a une semaine',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
value1: '',
value2: '',
value3: ''
@@ -97,7 +93,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
:shortcuts="shortcuts"
range-separator="à"
start-placeholder="Date de début"
end-placeholder="Date de fin"
@@ -110,33 +106,31 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'La semaine passée',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Le mois dernier',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Les 2 derniers mois',
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: 'La semaine passée',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}, {
text: 'Le mois dernier',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}, {
text: 'Les 2 derniers mois',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};

2
website/docs/fr-FR/time-picker.md
View File

@@ -6,7 +6,7 @@ Utiliser TimePicker pour sélectionner un horaire.
Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
:::demo Utilisez `el-time-picker` puis l'attribut `picker-options` et sa propriété `disabledHours` `disabledMinutes` and `disabledSeconds` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
:::demo Utilisez `el-time-picker` puis l'attribut et sa propriété `disabledHours` `disabledMinutes` and `disabledSeconds` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
```html
<template>

2
website/docs/fr-FR/time-select.md
View File

@@ -6,7 +6,7 @@ Utiliser TimeSelect pour sélectionner un horaire.
Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.
:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut.
```html
<el-time-select
v-model="value"

96
website/docs/jp/datetime-picker.md
View File

@@ -26,7 +26,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
<div class="block">
@@ -44,28 +44,24 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
export default {
data() {
return {
pickerOptions: {
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);
}
}]
},
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
value1: '',
value2: '',
value3: ''
@@ -97,7 +93,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
@@ -110,33 +106,31 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};

78
website/docs/jp/time-picker.md
View File

@@ -2,34 +2,6 @@
時間インプットにはタイムピッカーを使用します。
### 固定タイムピッカー
ユーザーが選択できる固定時間のリストを提供する。
:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Select time">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
```
:::
### 任意のタイムピッカー
任意の時間を選ぶことができます。
@@ -94,47 +66,6 @@
```
:::
### 固定時間範囲
開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
:::demo
```html
<template>
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
```
:::
### 任意の時間範囲
任意の時間範囲を選択することができます。
@@ -193,15 +124,6 @@
| name | ネイティブ入力の `name` と同じ | string | — | — |
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
### 時間選択オプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | 開始時刻 | string | — | 09:00 |
| end | 終了時刻 | string | — | 18:00 |
| step | タイムステップ | string | — | 00:30 |
| minTime | 最低時間、それ以前の時間は無効化されます。 | string | — | 00:00 |
| maxTime | 最大時間、この時間以降は無効化されます。 | string | — | — |
| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |

53
website/docs/jp/time-select.md
View File

@@ -1,12 +1,12 @@
## TimeSelect
## タイムピッカー
Use Time Select for time input.
時間インプットにはタイムピッカーを使用します。
### Fixed time picker
### 固定タイムピッカー
Provide a list of fixed time for users to choose.
ユーザーが選択できる固定時間のリストを提供する。
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
```html
<el-time-select
v-model="value"
@@ -28,9 +28,9 @@ Provide a list of fixed time for users to choose.
```
:::
### Fixed time range
### 固定時間範囲
If start time is picked at first, then the end time will change accordingly.
開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
:::demo
```html
@@ -68,30 +68,29 @@ If start time is picked at first, then the end time will change accordingly.
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | string | - | - |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
| value / v-model | バインディング値 | - | - |
| editable | 入力が編集可能かどうか | boolean | — | true |
| clearable | クリアボタンを表示するかどうか | boolean | — | true |
| size | 入力のサイズ | string | medium / small / mini | — |
| placeholder | 非範囲モード時のプレースホルダ | string | — | — |
| name | ネイティブ入力の `name` と同じ | string | — | — |
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
| start | 開始時刻 | string | — | 09:00 |
| end | 終了時刻 | string | — | 18:00 |
| step | タイムステップ | string | — | 00:30 |
| minTime | 最低時間、それ以前の時間は無効化されます。 | string | — | 00:00 |
| maxTime | 最大時間、この時間以降は無効化されます。 | string | — | — |
### Events
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
| blur | インプットがぼやけたときされます | component instance |
| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
### Methods
### 方法
| Method | Description | Parameters |
| ---- | ---- | ---- |
| focus | focus the Input component | - |
| focus | インプットコンポーネントにフォーカス | - |
| blur | blur the Input component | - |

96
website/docs/zh-CN/datetime-picker.md
View File

@@ -26,7 +26,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
type="datetime"
placeholder="选择日期时间"
align="right"
:picker-options="pickerOptions">
:shortcuts="shortcuts">
</el-date-picker>
</div>
<div class="block">
@@ -44,28 +44,24 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.emit('pick', date);
}
}]
},
shortcuts: [{
text: '今天',
value: new Date(),
}, {
text: '昨天',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
text: '一周前',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
value1: '',
value2: '',
value3: ''
@@ -96,7 +92,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
:shortcuts="shortcuts"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@@ -109,33 +105,31 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
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: '最近一周',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}, {
text: '最近一个月',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}, {
text: '最近三个月',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};