element-plus/website/docs/jp/time-select.md

97 lines
2.9 KiB
Markdown
Raw Normal View History

## タイムピッカー
2020-11-04 10:30:14 +08:00
時間インプットにはタイムピッカーを使用します。
2020-11-04 10:30:14 +08:00
### 固定タイムピッカー
2020-11-04 10:30:14 +08:00
ユーザーが選択できる固定時間のリストを提供する。
2020-11-04 10:30:14 +08:00
:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
2020-11-04 10:30:14 +08:00
```html
<el-time-select
v-model="value"
2020-12-16 22:09:48 +08:00
start='08:30'
step='00:15'
end='18:30'
2020-11-04 10:30:14 +08:00
placeholder="Select time">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
```
:::
### 固定時間範囲
2020-11-04 10:30:14 +08:00
開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
2020-11-04 10:30:14 +08:00
:::demo
```html
<template>
<el-time-select
placeholder="Start time"
v-model="startTime"
2020-12-16 22:09:48 +08:00
start='08:30'
step='00:15'
end='18:30'>
2020-11-04 10:30:14 +08:00
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
2020-12-16 22:09:48 +08:00
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
2020-11-04 10:30:14 +08:00
</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 | — | — |
2020-11-04 10:30:14 +08:00
### イベント
2020-11-04 10:30:14 +08:00
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
| blur | インプットがぼやけたときされます | component instance |
| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
2020-11-04 10:30:14 +08:00
### 方法
2020-11-04 10:30:14 +08:00
| Method | Description | Parameters |
| ---- | ---- | ---- |
| focus | インプットコンポーネントにフォーカス | - |
2020-11-04 10:30:14 +08:00
| blur | blur the Input component | - |