Timepicker

The timepicker adds a scrollable time-selection dropdown to any text input. Choose between 12-hour and 24-hour formats, and configure the minute step interval. Wired with useTimepicker.

12-Hour Format (Default)
<input type="text"
  class="vd-input"
  placeholder="hh:mm AM/PM"
  data-vd-timepicker
  readonly>
24-Hour Format
<input type="text"
  class="vd-input"
  placeholder="HH:mm"
  data-vd-timepicker
  data-vd-timepicker-format="24h"
  readonly>
15-Minute Step
<input type="text"
  class="vd-input"
  placeholder="Select time…"
  data-vd-timepicker
  data-vd-timepicker-step="15"
  readonly>
API Reference

Wiring

import { ref } from 'vue';
import { useTimepicker } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useTimepicker(root);   // wires [data-vd-timepicker] inside root; cleanup on unmount

// react to a time being chosen
root.value?.addEventListener('timepicker:select', (e) => {
  console.log(e.detail.time, e.detail.hours, e.detail.minutes);
});

CSS Classes

ClassDescription
.vd-timepicker-popupThe scrollable dropdown container positioned below the input
.vd-timepicker-itemIndividual time slot option
.vd-timepicker-item.is-selectedThe currently selected time slot (highlighted)

Data Attributes

AttributeDescription
data-vd-timepickerActivates the timepicker on the input
data-vd-timepicker-formatSet to "24h" for 24-hour format. Default is 12-hour with AM/PM
data-vd-timepicker-stepMinute interval between time slots (default: 30). Common values: 15, 30, 60

Composable API

SymbolDescription
useTimepicker(root)Composable — attaches a time dropdown to every [data-vd-timepicker] input inside the root ref. Call once in setup().
(automatic cleanup)The popup and listeners are removed on component unmount.

Events

EventDescription
timepicker:selectFired on the input when a time is chosen. event.detail contains { time: string, hours: number, minutes: number }
Accessibility
  • The dropdown has role="listbox"; each time slot has role="option"
  • The input receives aria-haspopup="listbox" and aria-expanded state
  • ↑ / ↓ arrow keys navigate time slots; Enter selects; Escape closes
  • aria-activedescendant tracks the focused time slot for screen readers
  • Selected slot receives aria-selected="true"
  • Focus returns to the input after selection or dismissal