TimePicker 时间选择框

输入或选择时间的控件。

何时使用

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

代码演示

基本

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

<template>
  <a-time-picker v-model:value="value" />
  <a-time-picker v-model:value="strValue" valueFormat="HH:mm:ss" />
</template>
<script lang="ts">
import moment, { Moment } from 'moment';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<Moment>(moment('08:00:00', 'HH:mm:ss'));
    const strValue = ref<string>('09:00:00');
    watch(value, () => {
      console.log(value.value);
    });
    watch(strValue, () => {
      console.log(strValue.value);
    });
    return {
      value,
      strValue,
      moment,
    };
  },
});
</script>

附加内容

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

<template>
  <div>
    <a-time-picker v-model:value="value" v-model:open="open" @openChange="handleOpenChange">
      <template #addon="{ prefixCls }">
        <a-button size="small" type="primary" @click="handleClose">Ok {{ prefixCls }}</a-button>
      </template>
    </a-time-picker>
    <a-time-picker v-model:value="value" v-model:open="open2">
      <template #addon>
        <a-button size="small" type="primary" @click="handleClose">Ok</a-button>
      </template>
    </a-time-picker>
  </div>
</template>
<script lang="ts">
import { Moment } from 'moment';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const open = ref(false);
    const open2 = ref(false);
    const value = ref<Moment>();
    const handleOpenChange = (openStatus: boolean) => {
      console.log('open', openStatus);
      open.value = openStatus;
    };
    const handleClose = () => {
      open.value = false;
      open2.value = false;
    };
    return {
      value,
      open,
      open2,
      handleOpenChange,
      handleClose,
    };
  },
});
</script>

选择时分

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

<template>
  <a-time-picker v-model:value="value" format="HH:mm" />
</template>
<script lang="ts">
import moment from 'moment';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref(moment('12:08', 'HH:mm'));
    return {
      value,
      moment,
    };
  },
});
</script>

三种大小

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

<template>
  <div>
    <a-time-picker v-model:value="value1" size="large" />
    <a-time-picker v-model:value="value2" />
    <a-time-picker v-model:value="value3" size="small" />
  </div>
</template>
<script lang="ts">
import moment from 'moment';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      value1: ref(moment('12:08:23', 'HH:mm')),
      value2: ref(moment('12:08:23', 'HH:mm')),
      value3: ref(moment('12:08:23', 'HH:mm')),
    };
  },
});
</script>

12 小时制

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

<template>
  <div>
    <a-time-picker v-model:value="value" use12-hours />
    <a-time-picker v-model:value="value" use12-hours format="h:mm:ss A" />
    <a-time-picker v-model:value="value" use12-hours format="h:mm a" />
  </div>
</template>
<script lang="ts">
import { Moment } from 'moment';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      value: ref<Moment | undefined>(undefined),
    };
  },
});
</script>

禁用

禁用时间选择。

<template>
  <a-time-picker :value="moment('12:08:23', 'HH:mm:ss')" disabled />
</template>
<script lang="ts">
import moment from 'moment';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    return {
      moment,
    };
  },
});
</script>

步长选项

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

<template>
  <a-time-picker v-model:value="value" :minute-step="15" :second-step="10" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref();
    return {
      value,
    };
  },
});
</script>

后缀图标

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

<template>
  <a-time-picker v-model:value="value" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
    <template #suffixIcon><smile-outlined /></template>
  </a-time-picker>
</template>
<script lang="ts">
import moment, { Moment } from 'moment';
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    SmileOutlined,
  },
  setup() {
    return {
      moment,
      value: ref<Moment | undefined>(),
    };
  },
});
</script>

API

事件

方法