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

タイムピッカー

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

任意のタイムピッカー

任意の時間を選ぶことができます。

:::demo ラベルに el-time-picker を用い、disabledHours disabledMinutes and disabledSeconds を指定することで時間範囲を制限することができます。デフォルトでは、マウスホイールをスクロールして時間を選ぶことができますが、代わりに arrow-control 属性が設定されている場合は矢印を使って時間を選ぶこともできます。

<template>
  <el-time-picker
    v-model="value1"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
    placeholder="Arbitrary time"
  >
  </el-time-picker>
  <el-time-picker
    arrow-control
    v-model="value2"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
    placeholder="Arbitrary time"
  >
  </el-time-picker>
</template>

<script>
  const makeRange = (start, end) => {
    const result = []
    for (let i = start; i <= end; i++) {
      result.push(i)
    }
    return result
  }
  export default {
    data() {
      return {
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
      }
    },
    methods: {
      // e.g. allow 17:30:00 - 18:30:00
      disabledHours() {
        return makeRange(0, 16).concat(makeRange(19, 23))
      },
      disabledMinutes(hour) {
        if (hour === 17) {
          return makeRange(0, 29)
        }
        if (hour === 18) {
          return makeRange(31, 59)
        }
      },
      disabledSeconds(hour, minute) {
        if (hour === 18 && minute === 30) {
          return makeRange(1, 59)
        }
      },
    },
  }
</script>

:::

任意の時間範囲

任意の時間範囲を選択することができます。

:::demo 範囲を指定するには、is-range 属性を追加する。また、範囲モードでは arrow-control がサポートされている。

<template>
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="To"
    start-placeholder="Start time"
    end-placeholder="End time"
  >
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="To"
    start-placeholder="Start time"
    end-placeholder="End time"
  >
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      }
    },
  }
</script>

:::

属性

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	バインディング値	date	—	—
readonly	タイムピッカーが読み取り専用かどうか	boolean	—	false
disabled	タイムピッカーが無効になっているかどうか	boolean	—	false
editable	入力が編集可能かどうか	boolean	—	true
clearable	クリアボタンを表示するかどうか	boolean	—	true
size	入力のサイズ	string	medium / small / mini	—
placeholder	非範囲モード時のプレースホルダ	string	—	—
start-placeholder	範囲モードの開始時刻のプレースホルダ	string	—	—
end-placeholder	範囲モード終了時のプレースホルダ	string	—	—
is-range	時間範囲を選択するかどうか	boolean	—	false
arrow-control	矢印ボタンを使って時間を選択するかどうか	boolean	—	false
align	整列	left / center / right	left
popper-class	タイムピッカーのドロップダウンのカスタムクラス名	string	—	—
range-separator	範囲セパレータ	string	—	'-'
format	format of the displayed value in the input box	string	see date formats	HH:mm:ss
default-value	オプション、カレンダーのデフォルトの日付	Date for TimePicker, string for TimeSelect	anything accepted by new Date() for TimePicker, selectable value for TimeSelect	—
name	ネイティブ入力の name と同じ	string	—	—
prefix-icon	カスタムプレフィックスアイコンクラス	string	—	el-icon-time
clear-icon	カスタムクリアアイコンクラス	string	—	el-icon-circle-close
disabled-hours	To specify the array of hours that cannot be selected	function	—	—
disabled-minutes	To specify the array of minutes that cannot be selected	function(selectedHour)	—	—
disabled-seconds	To specify the array of seconds that cannot be selected	function(selectedHour, selectedMinute)	—	—

イベント

Event Name	Description	Parameters
change	ユーザーが値を確認したときにトリガされます。	component's binding value
blur	インプットがぼやけたときされます	component instance
focus	入力がフォーカスされているときにトリガされます。	component instance

方法

Method	Description	Parameters
focus	インプットコンポーネントにフォーカス	—
blur	blur the Input component	—