timepicker-ui

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[4.3.0] - 2026-03-26

Added

Changed

[4.2.2] - 2026-03-24

Fixed

[4.2.1] - 2026-03-18

Fixed

[4.2.0] - 2026-03-18

Added

Fixed

[4.1.7] - 2026-03-08

Fixed

[4.1.6] - 2026-02-14

Fixed

[4.1.5] - 2026-02-10

Fixed

[4.1.4] - 2026-02-09

Fixed

[4.1.3] - 2026-02-09

Fixed

Added

[4.1.2] - 2026-02-08

Fixed

Added

[4.1.1] - 2026-02-01

Fixed

Internal

[4.1.0] - 2026-01-31

Added

Changed

[4.0.3] - 2026-01-23

Fixed

[4.0.2] - 2025-11-23

Fixed

Added

[4.0.1] - 2025-11-21

Fixed

TypeScript Callback Types

Before (4.0.0):

// Callbacks had unknown types
onConfirm?: TimepickerEventCallback; // eventData: unknown

After (4.0.1):

// Callbacks are now properly typed
onConfirm?: TimepickerEventCallback<ConfirmEventData>; // eventData: { hour?: string, minutes?: string, type?: string }

Impact: Developers now get full type safety and IntelliSense for callback parameters without needing manual type assertions.

[4.0.0] - 2025-11-21

Breaking Changes

CSS Class Names Renamed

All CSS classes have been renamed from timepicker-ui-* to tp-ui-* for shorter, cleaner class names.

Migration:

/* v3 */
.timepicker-ui-wrapper {
}
.timepicker-ui-modal {
}
.timepicker-ui-clock-face {
}
.timepicker-ui-hour {
}
.timepicker-ui-minutes {
}

/* v4 */
.tp-ui-wrapper {
}
.tp-ui-modal {
}
.tp-ui-clock-face {
}
.tp-ui-hour {
}
.tp-ui-minutes {
}

Impact: If you have custom CSS targeting timepicker classes, you must update all class names.

Grouped Options Structure

All options are now organized into logical groups (clock, ui, labels, behavior, callbacks) for better maintainability and clarity.

Migration:

// v3
new TimepickerUI(input, {
  clockType: "12h",
  theme: "dark",
  enableSwitchIcon: true,
  onConfirm: (data) => console.log(data),
});

// v4
new TimepickerUI(input, {
  clock: { type: "12h" },
  ui: { theme: "dark", enableSwitchIcon: true },
  callbacks: { onConfirm: (data) => console.log(data) },
});

Legacy DOM Events Removed

Custom DOM events (timepicker:confirm, timepicker:open, etc.) have been completely removed. Use EventEmitter API or callback options instead.

Migration:

// v3 - Removed
input.addEventListener("timepicker:confirm", (e) => console.log(e.detail));

// v4 - EventEmitter API
picker.on("confirm", (data) => console.log(data));

// v4 - Or callback options
new TimepickerUI(input, {
  callbacks: { onConfirm: (data) => console.log(data) },
});

setTheme() Method Removed

Programmatic theme customization via setTheme() has been removed. Use CSS classes with CSS variable overrides instead.

Migration:

// v3 - Removed
picker.setTheme({ primaryColor: "#ff0000" });

// v4 - Use CSS classes
new TimepickerUI(input, { ui: { cssClass: "my-theme" } });

/* Define theme in CSS */
.tp-ui-wrapper.my-theme {
  --tp-primary: #ff0000;
  --tp-bg: #000000;
}

Added

Changed

Removed

Fixed

[3.2.0] - 2025-11-14

Added

Changed

Fixed

Performance

Developer Experience

Migration Guide

Breaking Change:

// Old (v3.1.x and earlier)
const picker = new TimepickerUI(input, {
  theme: "m3",
});

// New (v3.2.0+)
const picker = new TimepickerUI(input, {
  theme: "m3-green", // Renamed for clarity
});

New Features (Optional):

// Mobile clock face toggle (automatic on mobile view)
// Click keyboard icon to expand/collapse clock face

// Desktop to mobile switching
const picker = new TimepickerUI(input, {
  enableSwitchIcon: true, // Shows toggle icon
});

// Custom icons (optional, defaults to built-in SVGs)
const picker = new TimepickerUI(input, {
  iconTemplate: "<svg>...</svg>", // Desktop icon
  iconTemplateMobile: "<svg>...</svg>", // Mobile icon
});

// Custom labels (optional)
const picker = new TimepickerUI(input, {
  timeLabel: "Select time", // Desktop label
  mobileTimeLabel: "Enter Time", // Mobile label
});

Bundler Configuration:

[3.1.2] - 2025-11-07

[3.1.2] - 2025-11-07

[3.1.1] - 2025-11-07

Added

Changed

Performance

[3.1.0] - 2025-11-07

Added

Changed

Deprecated

Fixed

Migration Guide

// Old way (deprecated, will be removed in v4)
input.addEventListener("timepicker:confirm", (e) => {
  console.log(e.detail);
});

// New way (recommended)
picker.on("confirm", (data) => {
  console.log(data);
});

[3.0.2] - 2025-07-25

Fixed

[3.0.1] - 2025-07-25

Fixed

[3.0.0] - 2025-07-25

Added

Changed

Fixed

Removed

[2.6.1] - 2022-11-17

Add

[2.6.0] - 2022-11-16

Change

Add

Fix

[2.5.0] - 2022-05-06

Change

Add

Fix

[2.4.5] - 2022-04-02

Fix

[2.4.4] - 2022-04-02

Fix

[2.4.3] - 2022-04-02

Fix

Add

[2.4.2] - 2022-03-29

Fix

Add

[2.4.1] - 2022-03-26

Add

Fix

Update

[2.4.0] - 2022-03-22

Add

Update

[2.3.0] - 2022-03-05

Fix

Change

Add

[2.2.3] - 2021-09-26

Update

[2.2.2] - 2021-09-25

Fixed

Update

[2.2.1] - 2021-09-24

Fixed

[2.2.0] - 2021-09-23

Added

Update

[2.1.1] - 2021-01-24

Fixed

[2.1.0] - 2021-01-24

Added

Change

Fixed

[2.0.2] - 2021-01-21

Fixed

[2.0.1] - 2021-01-18

Fixed

[2.0.0] - 2021-01-17

Changed

Fixed

[1.2.0] - 2020-11-05

Changed

Added

This site is open source. Improve this page.