Skip to content
timepicker-ui
Guide

Installation

Get started with Timepicker-UI in your project

Package Manager

Install via npm, yarn, or pnpm:

index.bashbash
1npm install timepicker-ui
2

3yarn add timepicker-ui
4

5pnpm add timepicker-ui

Required Global CSS

Add this to your global stylesheet to avoid layout issues:

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

Import Styles

Import the library styles in your main entry file:

index.tstypescript
import "timepicker-ui/main.css";

CDN

For quick prototyping, use the CDN version:

index.htmlhtml
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker-ui@4.4.0/dist/css/main.css">
2<script src="https://cdn.jsdelivr.net/npm/timepicker-ui@4.4.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>

Ready for the next step?

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