ElementPlus TimePicker 時間選擇器

TimePicker 時間選擇器

用于選擇或輸入日期

任意時間點

可以選擇任意時間

使用 el-time-picker 標簽，通過 disabledHours disabledMinutes 和 disabledSeconds 限制可選時間范圍。提供了兩種交互方式：默認情況下通過鼠標滾輪進行選擇，打開arrow-control屬性則通過界面上的箭頭進行選擇。

<template>
  <el-time-picker
    v-model="value1"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
    placeholder="任意時間點"
  >
  </el-time-picker>
  <el-time-picker
    arrow-control
    v-model="value2"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
    placeholder="任意時間點"
  >
  </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: {
      // 如允許 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>

任意時間范圍

可選擇任意的時間范圍

添加is-range屬性即可選擇時間范圍，同樣支持arrow-control屬性。

<template>
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結(jié)束時間"
    placeholder="選擇時間范圍"
  >
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結(jié)束時間"
    placeholder="選擇時間范圍"
  >
  </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>

Attributes

Events

Methods