TimePicker 时间选择框

输入或选择时间的控件。

何时使用

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

代码演示

12 小时制

12 小时制的时间选择器，默认的 format 为 h:mm:ss a。

<template>
  <div>
    <a-time-picker use12Hours @change="onChange" />
    <a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
    <a-time-picker use12Hours format="h:mm a" @change="onChange" />
  </div>
</template>
<script>
  export default {
    methods: {
      onChange(time, timeString) {
        console.log(time, timeString);
      },
    },
  };
</script>

附加内容

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

<template>
  <div>
    <a-time-picker @openChange="handleOpenChange" :open="open">
      <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleClose"
        >Ok {{panel.prefixCls}}</a-button
      >
    </a-time-picker>
    <a-time-picker :open.sync="open2">
      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
    </a-time-picker>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        open: false,
        open2: false,
      };
    },
    methods: {
      handleOpenChange(open) {
        console.log('open', open);
        this.open = open;
      },
      handleClose() {
        this.open = false;
        this.open2 = false;
      },
    },
  };
</script>

基本

点击 TimePicker，然后可以在浮层中选择或者输入某一时间。

<template>
  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
</template>
<script>
  import moment from 'moment';
  export default {
    methods: {
      moment,
      onChange(time, timeString) {
        console.log(time, timeString);
      },
    },
  };
</script>

禁用

禁用时间选择。

<template>
  <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
</template>
<script>
  import moment from 'moment';
  export default {
    methods: {
      moment,
    },
  };
</script>

选择时分

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

<template>
  <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
</template>
<script>
  import moment from 'moment';
  export default {
    methods: {
      moment,
    },
  };
</script>

步长选项

可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。

<template>
  <a-time-picker :minuteStep="15" :secondStep="10" />
</template>

三种大小

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

<template>
  <div>
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    methods: {
      moment,
    },
  };
</script>

受控组件

value 和 onChange 需要配合使用。也可以直接使用v-model。

<template>
  <div>
    <p>use value and @change</p>
    <a-time-picker @change="onChange" :value="value" />
    <br />
    <br />
    <p>v-model</p>
    <a-time-picker v-model="value" />
    <br />
    <br />
    <p>Do not change</p>
    <a-time-picker :value="value2" />
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        value: null,
        value2: moment(),
      };
    },
    methods: {
      onChange(time) {
        console.log(time);
        this.value = time;
      },
    },
  };
</script>

后缀图标

点击 TimePicker，然后可以在浮层中选择或者输入某一时间。

<template>
  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
    <a-icon type="smile" slot="suffixIcon" />
  </a-time-picker>
</template>
<script>
  import moment from 'moment';
  export default {
    methods: {
      moment,
      onChange(time, timeString) {
        console.log(time, timeString);
      },
    },
  };
</script>

API

事件

方法