TimePicker 时间选择框

当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。

代码演示

基本

最简单的用法。

<v-time-picker></v-time-picker>

三种大小

三种大小的输入框，大的用在表单中，中的为默认。

<v-time-picker size="large"></v-time-picker>
<v-time-picker></v-time-picker>
<v-time-picker size="small"></v-time-picker>

受控组件

v-model 和 watch 需要配合使用。

<template>
  <v-time-picker v-model="value"></v-time-picker>
</template>
<script>
  export default {
    data: ()=> ({
      value: '08:30:00'
    }),
    watch: {
      value(val){
        console.log(val)
      }
    }
  }
</script>

禁用

禁用时间选择。

<v-time-picker disabled></v-time-picker>

选择时分

TimePicker 浮层中的列会随着format变化，当略去format中的某部分时，浮层中对应的列也会消失。

<v-time-picker format="HH:mm"></v-time-picker>

禁止选项

可以使用 disabledHours disabledMinutes disabledSeconds 组合禁止用户选择某个时间，配合hideDisabledOptions可以直接把不可选择的项隐藏。

<template>
  <v-time-picker :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds"></v-time-picker>
  <v-time-picker :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" hide-disabled-options></v-time-picker>
</template>
<script>
  export default {
    methods: {
        range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        },
        disabledHours(h) {
            const hours = this.range(0, 60);
            hours.splice(20, 4);
            return hours.includes(h);
        },
        disabledMinutes(m) {
            return this.range(0, 31).includes(m);
        },
        disabledSeconds(s) {
            return this.range(30, 60).includes(s);
        }
    }
  }
</script>

附加内容

在 TimePicker 选择框底部显示自定义的内容。

<v-time-picker>
  <template slot="addon" slot-scope="props">
    <v-button size="small" type="primary" @click="props.panel.close()">OK</v-button>
  </template>
</v-time-picker>

API

TimePicker Props