Time Picker

Accessible, unstyled listbox of time slots generated from min, max, and step.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { TimePicker } from "@vizejs/ui/time-picker";

Or copy the source into your project with vize lib pull time-picker (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Listbox of half-hour appointment slots with an unavailable lunch break. -->
<script setup lang="ts">
import { ref } from "vue";

import { TimePicker } from "@vizejs/ui/time-picker";
import type { PlainTime } from "@vizejs/ui/time-picker";

const slot = ref<PlainTime | null>({ hour: 10, minute: 0, second: 0 });

function label(time: PlainTime): string {
  return `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
}

function isLunch(time: PlainTime): boolean {
  return time.hour === 12;
}
</script>

<template>
  <div>
    <TimePicker
      v-model="slot"
      name="appointment"
      locale="en-US"
      aria-label="Appointment time"
      :min="{ hour: 9, minute: 0, second: 0 }"
      :max="{ hour: 17, minute: 0, second: 0 }"
      :step="30"
      :is-time-unavailable="isLunch"
    />
    <output>{{ slot ? label(slot) : "No slot" }}</output>
  </div>
</template>

API

TimePicker

Source: src/families/date-time/time-picker/time-picker.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for time-picker.vue (@vizejs/ui/time-picker): a role="listbox" of time slots composed from the Listbox family (listbox.behavior.md covers keyboard, typeahead, and active-descendant focus). Every row is proven by the named test.