Modern Time Picker Library

A lightweight, pure JavaScript time picker component based on Material Design. Easy to use, fully customizable, and mobile-ready.

Basic Usage

Simple time picker with default settings

HTML

<input id="basic-picker" value="10:30 PM" />

JavaScript

const basicTimePicker = new TimepickerUI('#basic-picker');
basicTimePicker.create();

24-Hour Format

Time picker with 24-hour clock format

HTML

<input id="format-24h-picker"  value="15:45" />

JavaScript

const format24hPicker = new TimepickerUI('#format-24h-picker', {
  clockType: '24h',
  enableSwitchIcon: true
});
format24hPicker.create();

Mobile Version

Optimized interface for mobile devices

HTML

<input id="mobile-picker"  value="14:30" />

JavaScript

const mobilePicker = new TimepickerUI('#mobile-picker', {
  mobile: true,
  clockType: '24h',
  enableSwitchIcon: true
});
mobilePicker.create();

Different Themes

Choose from various themes included in the library

HTML

<input id="theme-basic"  />
<input id="theme-crane-straight"  />
<input id="theme-crane-radius"  />
<input id="theme-m3"  />
<input id="theme-dark"  />
<input id="theme-glassmorphic"  />
<input id="theme-pastel"  />
<input id="theme-ai"  />
<input id="theme-cyberpunk"  />

JavaScript

new TimepickerUI('#theme-basic', { theme: 'basic' }).create();
new TimepickerUI('#theme-crane-straight', { theme: 'crane-straight' }).create();
new TimepickerUI('#theme-crane-radius', { theme: 'crane-radius' }).create();
new TimepickerUI('#theme-m3', { theme: 'm3' }).create();
new TimepickerUI('#theme-dark', { theme: 'dark' }).create();
new TimepickerUI('#theme-glassmorphic', { theme: 'glassmorphic' }).create();
new TimepickerUI('#theme-pastel', { theme: 'pastel' }).create();
new TimepickerUI('#theme-ai', { theme: 'ai' }).create();
new TimepickerUI('#theme-cyberpunk', { theme: 'cyberpunk' }).create();

Disabled Times

Block specific hours, minutes, or time intervals

HTML

<input id="disabled-hours"  />
<input id="disabled-minutes"  />
<input id="disabled-interval"  />

JavaScript

new TimepickerUI('#disabled-hours', {
  disabledTime: { hours: [1, 2, 3, 22, 23] }
}).create();

new TimepickerUI('#disabled-minutes', {
  disabledTime: { minutes: [15, 30, 45] }
}).create();

new TimepickerUI('#disabled-interval', {
  disabledTime: { interval: '12:00 - 18:00' }
}).create();

Editable Mode

Allow direct editing of time values in picker

HTML

<input id="editable-picker"  value="09:15 PM" />

JavaScript

const editablePicker = new TimepickerUI('#editable-picker', {
  editable: true,
  focusInputAfterCloseModal: true,
  enableSwitchIcon: true
});
editablePicker.create();

Inline Mode

Always-visible timepicker embedded in the page

HTML

<input id="inline-picker"  value="14:30" />
<div id="inline-container"></div>

JavaScript

const inlinePicker = new TimepickerUI('#inline-picker', {
  inline: {
    enabled: true,
    containerId: 'inline-container',
    showButtons: false,
    autoUpdate: true
  },
  clockType: '24h'
});
inlinePicker.create();

Event Handling

Listen to value changes and user interactions

Event Log:

Events will appear here...

HTML

<input id="event-picker"  value="12:00 PM" />
<div id="event-log"></div>

JavaScript

const eventPicker = new TimepickerUI('#event-picker');
eventPicker.create();

const eventLog = document.querySelector('#event-log');
const picker = document.querySelector('#event-picker');

picker.addEventListener('accept', (e) => {
  eventLog.innerHTML += `<p>Accept: ${e.detail.hour}:${e.detail.minutes}</p>`;
});

picker.addEventListener('cancel', (e) => {
  eventLog.innerHTML += `<p>Cancel event fired</p>`;
});

Custom Labels

Customize all labels and text in different languages

HTML

<input id="custom-labels-picker"  value="10:30 PM" />

JavaScript

const customLabelsPicker = new TimepickerUI('#custom-labels-picker', {
timeLabel: 'Select Time',
okLabel: 'It is ok',
cancelLabel: 'Nope',
amLabel: 'AM',
pmLabel: 'PM',
mobileTimeLabel: 'Enter Time',
hourMobileLabel: 'Hour',
minuteMobileLabel: 'Minute',
});
customLabelsPicker.create();

Multiple Pickers

Multiple isolated time pickers on the same page

HTML

<input id="multi-picker-1"  value="09:00" />
<input id="multi-picker-2"  value="12:30 PM" />
<input id="multi-picker-3"  value="17:00" />

JavaScript

new TimepickerUI('#multi-picker-1', {
  clockType: '24h',
  theme: 'basic'
}).create();

new TimepickerUI('#multi-picker-2', {
  clockType: '12h',
  theme: 'm3'
}).create();

new TimepickerUI('#multi-picker-3', {
  clockType: '24h',
  theme: 'crane-radius'
}).create();

New Events and Callbacks

New events and callbacks for more control over timepicker behavior

HTML

<input id="new-events-and-callbacks-picker"  value="10:00 PM" />

JavaScript

const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', {
  onOpen: (data) => {
    console.log('Picker opened!', data);
  },
  onCancel: (data) => {
    console.log('Picker cancelled', data);
  },
  onConfirm: (data) => {
    console.log('Time confirmed', data);
  },
  onUpdate: (data) => {
    console.log('Time updated', data);
  },
  onSelectHour: (data) => {
    console.log('Hour mode selected', data);
  },
  onSelectMinute: (data) => {
    console.log('Minute mode selected', data);
  },
  onSelectAM: (data) => {
    console.log('AM selected', data);
  },
  onSelectPM: (data) => {
    console.log('PM selected', data);
  },
  onError: (data) => {
    console.log('Error occurred', data.error);
  }
});
newEventsAndCallbacksPicker.create();

const pickerElement = newEventsAndCallbacksPicker.getElement();
if (pickerElement) {
  pickerElement.addEventListener('timepicker:open', (data) => {
    console.log('Picker opened!', data);
  });
  pickerElement.addEventListener('timepicker:cancel', (data) => {
    console.log('Picker cancelled', data);
  });
}

Advanced Configuration

Complex setup with multiple advanced options

HTML

<input id="advanced-picker"  value="10:00" />

JavaScript

const advancedPicker = new TimepickerUI('#advanced-picker', {
  clockType: '12h',
  theme: 'm3',
  enableSwitchIcon: true,
  focusTrap: true,
  editable: true,
  focusInputAfterCloseModal: true,
  delayHandler: 500,
  incrementHours: 1,
  incrementMinutes: 15,
  currentTime: {
    time: new Date(),
    updateInput: false,
    preventClockType: true
  },
  disabledTime: {
    interval: '22:00 - 06:00'
  },
  cssClass: 'my-custom-picker'
});
advancedPicker.create();

Version 3 events

Examples of the new version 3.0 events

HTML

<input id="version3-example"  value="10:00" />

JavaScript

const version3Example = new TimepickerUI('#version3-example', {
  theme: 'm3',
  clockType: '24h',
  focusTrap: false,
  delayHandler: 200,
  onOpen: (data) => {
    console.log('Version 3.0 picker opened!', data);
  },
});
version3Example.create();

const pickerElement = version3Example.getElement();
if (pickerElement) {
  pickerElement.addEventListener('timepicker:open', (data) => {
    console.log('Picker opened!', data);
  });
}

Destroy example

Example of how to destroy the timepicker

HTML

<input id="destroy-example"  value="14:30" />

JavaScript

const destroyExample = new TimepickerUI('#destroy-example', {
mobile: true,
clockType: '24h',
enableSwitchIcon: true
});
destroyExample.create();

const pickerElement = destroyExample.getElement();
if (pickerElement) {
  pickerElement.addEventListener('timepicker:open', (data) => {
    console.log('Picker opened!', data);
  });
}