TimePicker

Native time input with quick picks

A time of day. It is the native time input, so phones show their own wheel and the value is always HH:MM, whatever the display.

Basic

On air

00:00

Office hours (12h list)

Lap time

<script setup lang="ts">
import { ref } from "vue";
import { BlessLabel, BlessTimePicker } from "blessing-ui";
const t = ref("00:00");
const s = ref("13:30");
const lap = ref("00:01:30");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col" style="max-width: 200px">
      <BlessLabel for="d-t">On air</BlessLabel>
      <BlessTimePicker id="d-t" v-model="t" :step="30" />
      <small>{{ t || "—" }}</small>
    </div>
    <div class="col" style="max-width: 200px">
      <BlessLabel for="d-s">Office hours (12h list)</BlessLabel>
      <BlessTimePicker id="d-s" v-model="s" min="09:00" max="18:00" hour12 size="sm" />
    </div>
    <div class="col" style="max-width: 200px">
      <BlessLabel for="d-lap">Lap time</BlessLabel>
      <BlessTimePicker id="d-lap" v-model="lap" seconds size="lg" />
    </div>
  </div>
</template>

• step spaces the suggested times (every 15 minutes by default). Any other minute can still be typed.
• min / max bound both the suggestions and validation; hour12 shows the suggestions as 9:00 AM; seconds adds seconds.
• Inside a Field the field's label names it; alone it is called "Time" unless you pass label.

Usage

import { BlessTimePicker } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
step	number	15	minutes between options in the dropdown list
min	string	—
max	string	—
hour12	boolean	—	12-hour display in the list; the value stays "HH:MM"
seconds	boolean	—
disabled	boolean	—
invalid	boolean	—
label	string	—	accessible name when there's no Field or <label>; defaults to "Time" outside a Field
size	"md" | "sm" | "lg"	"md"
modelValue	string	""	"HH:MM" or "HH:MM:SS"

Events

Name	Payload	Description
update:modelValue	[value: string]