mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
886f2a3075
* docs(docs): update the 'value' property to 'ModelValue' * docs: replace modelValue to model-value
97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
## タイムピッカー
|
|
|
|
時間インプットにはタイムピッカーを使用します。
|
|
|
|
### 固定タイムピッカー
|
|
|
|
ユーザーが選択できる固定時間のリストを提供する。
|
|
|
|
:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
|
|
```html
|
|
<el-time-select
|
|
v-model="value"
|
|
start='08:30'
|
|
step='00:15'
|
|
end='18:30'
|
|
placeholder="Select time">
|
|
</el-time-select>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: ''
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### 固定時間範囲
|
|
|
|
開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
|
|
|
|
:::demo
|
|
```html
|
|
<template>
|
|
<el-time-select
|
|
placeholder="Start time"
|
|
v-model="startTime"
|
|
start='08:30'
|
|
step='00:15'
|
|
end='18:30'>
|
|
</el-time-select>
|
|
<el-time-select
|
|
placeholder="End time"
|
|
v-model="endTime"
|
|
start='08:30'
|
|
step='00:15'
|
|
end='18:30'
|
|
:minTime="startTime">
|
|
</el-time-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
startTime: '',
|
|
endTime: ''
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Attributes
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|
| model-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 | — | — |
|
|
|
|
### イベント
|
|
| Event Name | Description | Parameters |
|
|
|---------|--------|---------|
|
|
| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
|
|
| blur | インプットがぼやけたときされます | component instance |
|
|
| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
|
|
|
|
### 方法
|
|
| Method | Description | Parameters |
|
|
| ---- | ---- | ---- |
|
|
| focus | インプットコンポーネントにフォーカス | - |
|
|
| blur | blur the Input component | - |
|