Installation

Get started with Timepicker-UI in your project

Package Manager

Install via npm, yarn, or pnpm:

index.sh

1npm install timepicker-ui
2
3yarn add timepicker-ui
4
5pnpm add timepicker-ui

Box Sizing

#

You do not need a global box-sizing reset for the picker. It sets box-sizing: border-box on its own modal and on every element inside it.

If your own layout already uses the common reset below, keep it. It does not conflict with the picker.

index.css

1*,
2*::before,
3*::after {
4  box-sizing: border-box;
5}

Import Styles

#

Import the library styles in your main entry file:

index.ts

import "timepicker-ui/main.css";

CDN

#

For quick prototyping, use the CDN version:

index.html

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker-ui@4.7.0/dist/css/main.css">
2<script src="https://cdn.jsdelivr.net/npm/timepicker-ui@4.7.0/dist/index.umd.js"></script>
3<script>
4  // The UMD build exposes the class as the global TimepickerUI
5  const picker = new TimepickerUI('#timepicker');
6  picker.create();
7</script>

Plugins load as separate UMD files after the core script. Each one sets its own global: TimepickerUIRange exposes RangePlugin, TimepickerUITimezone exposes TimezonePlugin and TimepickerUIWheel exposes WheelPlugin. Register them once with TimepickerUI.PluginRegistry.register() before creating a picker, then turn the feature on in the options.

index.html

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker-ui@4.7.0/dist/css/main.css">
2<script src="https://cdn.jsdelivr.net/npm/timepicker-ui@4.7.0/dist/index.umd.js"></script>
3<script src="https://cdn.jsdelivr.net/npm/timepicker-ui@4.7.0/dist/plugins/range.umd.js"></script>
4<script>
5  TimepickerUI.PluginRegistry.register(TimepickerUIRange.RangePlugin);
6  const picker = new TimepickerUI('#timepicker', { range: { enabled: true } });
7  picker.create();
8</script>

Ready for the next step?

Check out the Quick Start guide to start building with Timepicker-UI