Time Picker

An analog clock-face time picker built on wf-time-picker.js . Opens as a fixed-position dropdown showing a visual clock for hour selection followed by minute selection. Supports 12-hour (AM/PM) and 24-hour modes, configurable minute step increments, optional OK/Cancel/Now footer buttons, free-text or read-only input, and custom display formats.

Quick Start

Import the module once. All elements with data-wf-timepicker are enhanced automatically on DOMContentLoaded . The component adds a clock icon to the wrapper and seeds the panel from the input's current value. The default format is hh:mm tt (12-hour with AM/PM).

import './wf-time-picker.js'

<!-- Auto-init (12-hour, default) -->
<div class="wf-timepicker" data-wf-timepicker>
  <input type="text" name="meeting_time" class="wf-input">
</div>

<!-- Manual init -->
<div class="wf-timepicker" id="my-tp">
  <input type="text" name="alarm_time" class="wf-input">
</div>
<script type="module">
  import { WojoTimePicker } from './wf-time-picker.js'
  new WojoTimePicker(document.getElementById('my-tp')).init()
</script>

24-Hour Mode

Add data-wf-is24 to switch to 24-hour mode. The AM/PM toggle is hidden from the header, and the hour ring shows both outer (1–12) and inner (13–24/00) labels. The default format automatically changes to HH:mm unless overridden with data-wf-format .

<!-- 12-hour (default) -->
<div class="wf-timepicker" data-wf-timepicker>
  <input type="text" name="time" class="wf-input">
</div>

<!-- 24-hour -->
<div class="wf-timepicker" data-wf-timepicker data-wf-is24>
  <input type="text" name="time" class="wf-input">
</div>

<!-- 24-hour with custom format -->
<div class="wf-timepicker" data-wf-timepicker data-wf-is24 data-wf-format="H:mm">
  <input type="text" name="time" class="wf-input">
</div>

Minute Steps

Use data-wf-minute-step to snap the minute hand to fixed increments. Supported values: 1 , 5 , 10 , 15 , 20 , 30 . Non-step minutes are visually dimmed and unclickable. The default step is 1 (every minute).

<!-- 15-minute steps -->
<div class="wf-timepicker" data-wf-timepicker data-wf-minute-step="15">
  <input type="text" name="slot" class="wf-input">
</div>

<!-- 30-minute steps -->
<div class="wf-timepicker" data-wf-timepicker data-wf-minute-step="30">
  <input type="text" name="slot" class="wf-input">
</div>

Footer Buttons

The panel footer shows Cancel and Now buttons by default. Add data-wf-ok-btn to defer the close until the user confirms. Set data-wf-cancel-btn="false" or data-wf-now-btn="false" to hide individual buttons. If no buttons remain, the footer is not rendered.

<!-- With OK button (defers close until confirmed) -->
<div class="wf-timepicker" data-wf-timepicker data-wf-ok-btn>
  <input type="text" name="time" class="wf-input">
</div>

<!-- No footer at all -->
<div class="wf-timepicker" data-wf-timepicker
     data-wf-now-btn="false"
     data-wf-cancel-btn="false">
  <input type="text" name="time" class="wf-input">
</div>

Format Tokens

The data-wf-format attribute controls the string written to the visible input when a time is confirmed. Combine tokens freely — any non-token characters are preserved as separators. The default format is hh:mm tt (12-hour) or HH:mm (24-hour).

Data Attributes

All configuration is applied via data-wf-* attributes on the .wf-timepicker wrapper.

Events & API

Access the instance via el._wfTimePicker after auto-init or manual new WojoTimePicker(el).init() .

Methods

Events

All events are dispatched on the .wf-timepicker wrapper element.

// Access instance
const wrapper = document.querySelector('#my-tp')
const tp = wrapper._wfTimePicker

// Programmatic control
tp.setTime('2:30 PM')     // set from 12h string
tp.setTime('14:30')       // or 24h string
tp.getTime()              // -> { hour: 14, minute: 30 }
tp.clearTime()            // clear
tp.setDisabled(true)      // disable
tp.show()                 // open panel
tp.hide()                 // close panel
tp.destroy()              // remove component

// Listen for changes
wrapper.addEventListener('wf:time-change', e => {
  console.log(e.detail.hour)    // 0-23 (24h) or null
  console.log(e.detail.minute)  // 0-59 or null
  console.log(e.detail.value)   // formatted string or null
})