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

タイムピッカー

時間インプットにはタイムピッカーを使用します。

固定タイムピッカー

ユーザーが選択できる固定時間のリストを提供する。

:::demo el-time-select ラベルを使用し、開始時刻、終了時刻、タイムステップを start, end, step で指定します。`

<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

<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	バインディング値	—	—
disabled	タイムピッカーが無効になっているかどうか	boolean	—	false
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	—