@tito10047/vanilla-js-timepickerA time picker with zero dependencies.

One constructor call, a fully accessible dropdown, keyboard navigation, async validation, and CSS-variable theming — all in under 10 kB.

Get Started

Live Demo

API Reference

View on GitHub

Zero dependencies

No jQuery, no Moment, no framework. Drop it into any project — vanilla JS, Vue, React, Svelte, or a plain HTML page.

TypeScript first

Written in TypeScript from the ground up. Every option, event, and return type is fully typed and exported.

24h · 12h · seconds

HH:mm, hh:mm a, HH:mm:ss — one format string covers all layouts. AM/PM toggle renders automatically.

Async lifecycle hooks

onBeforeOpen, onBeforeChange, and validate accept Promises. Block the picker, run an API call, return an error message.

Fully accessible

ARIA combobox on the input, dialog on the dropdown, spinbutton per column. Full keyboard navigation — arrows, Page Up/Down, Home, End, Escape.

CSS-variable theming

Light, dark, and auto (system preference) themes out of the box. Override any of the 20+ CSS custom properties to match your design system.

A complete example, start to finish

import { Timepicker } from '@tito10047/vanilla-js-timepicker'
import '@tito10047/vanilla-js-timepicker/dist/timepicker.css'

const tp = new Timepicker('#departure', {
  format: 'HH:mm',
  minTime: '06:00',
  maxTime: '22:00',
  minuteStep: 15,
  showNowButton: true,
  showClearButton: true,
  locale: 'en',
  validate: async (value) => {
    const reserved = await fetchReservedTimes()
    return reserved.includes(value) ? `${value} is already reserved` : true
  },
  onChange: (value, event) => {
    console.log('Selected:', value, '| Previous:', event.prev)
  },
})

// Programmatic control
await tp.setValue('09:00')
console.log(tp.getValue())   // '09:00'
console.log(tp.getDate())    // Date object at 09:00

await tp.open()
await tp.close()
tp.destroy()

That is the whole integration: no Application, no imports beyond the class and CSS.

Ready? Continue with Getting Started.