The <clock-timepicker> is a simple and lightweight Web Component that allows you to pick a time or duration from a clock face. It is easy to use and fully customizable.

Example:

Find more examples on the bottom of this page.

Browser support

All major browsers are supported.

Device support

Both desktop and mobile devices are supported.
On mobile devices, the time picker will be displayed as a popup in a bigger size so touch input is easier.

No dependencies

The <clock-timepicker> has no dependencies at all. It is pure javascript (ES6 / ECMAScript 2015).
You can use it on any platform, on any OS, with any framework.

TypeScript support

The <clock-timepicker> publishes its type definitions so you can use it in TypeScript with strict types and auto completion.

Styling

The <clock-timepicker> popup can be individually styled with CSS variables.
With the CSS variable --clock-timepicker-accent-color you can give your timpicker quickly your own accent,
but there are a lot more CSS variables that you can use to adjust the timepicker to your own style.


        clock-timepicker {

           --clock-timepicker-accent-color: purple;

        }

The <clock-timepicker> uses an <input> element which is not put into shadow DOM to use your default styling.
All other HTML elements and CSS styles (that are responsible for the popup) are hold in the shadow DOM for not interfering with your own styles or any other libraries.

Internationalization (I18n)

Internationalization of the two buttons ("OK" and "Cancel") is achieved by adjusting the CSS variables
--clock-timepicker-button-ok and --clock-timepicker-button-cancel.
See CSS variables.

Keyboard support

The <clock-timepicker> allows you to enter time/duration easily with the keyboard,
navigate between time parts and escape to restore the previous value.

Installation

The <clock-timepicker> can be easily installed from NPM. npm install clock-timepicker
or you can download it and directly reference it in your HTML file:
<script type="module" src="clock-timepicker.js"></script>

Usage

Just insert the following code into your HTML: <clock-timepicker><clock-timepicker>
To customize the timepicker, you can set the options with HTML attributes. <clock-timepicker required value="08:00" precision="5"><clock-timepicker>
In certain frameworks (as Angular or React) it's important to use a own <input> element,
which you can i.e. bind to a form or a reactive property.
In that case enclose your <input> in the <clock-timepicker> element:

<clock-timepicker>
   <input [(ngModel)]="value" />
<clock-timepicker>

Options

You can set the options with attributes on the <clock-timepicker> element
or pass it in a configuration object to the constructor.

The following options are available:

Name	Default	Description
animationDuration	300	The duration in milliseconds for switching between time parts.
autosize	false	Set to true if the input should be automatically adjusted in size to fit its content.
format	'HH:mm'	The format used for the time also defines the time parts to be shown. HH, H, hh or h is used for the hours. mm or m is used for the minutes. ss or s is used for the seconds. Possible formats: 'HH:mm' (24-hours, always two digits) 'H:mm' (24-hours) 'hh:mm' (12-hours, always two digits) 'h:mm' (12-hours) 'HH:mm:ss' 'H:mm:ss' 'hh:mm:ss' 'h:mm:ss' 'mm:ss' 'm:ss' 'HH' 'H' 'hh' 'h' 'mm' 'm' 'ss' 's'
maximum	null	The maximum time/duration that can be selected.
minimum	null	The minimum time/duration that can be selected.
precision	1	The precision.
required	false	If set to true the input always has a value.
separator	':'	The separator used to separate the time parts.
usePlusSign	false	If you use the clock-timepicker as a duration picker with negative durations, it can make sense to show a plus sign for positive durations.
value	null	Sets the initial time.
vibrate	true	If turned on the timepicker issues haptic feedback when interacting with it.

CSS Variables

Name	Default	Description
--clock-timepicker-accent-color	#0797ff	The accent color defines the main color of the timepicker. This color is also a fallback for the header background, face selection color and --clock-timepicker-button-color if those are not specified.
--clock-timepicker-cursor	default	The mouse's cursor style (desktop version).
--clock-timepicker-button-background	none	The background color of the buttons.
--clock-timepicker-button-border	none	The border of the buttons.
--clock-timepicker-button-color	inherit	The text color of the buttons. If not specified, uses the --clock-timepicker-accent-color as a fallback.
--clock-timepicker-button-cancel	Cancel	The text of the cancel button.
--clock-timepicker-button-cancel-color	inherit	The text color of the cancel button. If not specified, uses the --clock-timepicker-button-color as a fallback.
--clock-timepicker-button-font-size	20px	The font color of the buttons.
--clock-timepicker-button-gap	30px	The gap between the buttons.
--clock-timepicker-button-ok	OK	The text of the OK button.
--clock-timepicker-button-ok-color	inherit	The text color of the OK button. If not specified, uses the --clock-timepicker-button-color as a fallback.
--clock-timepicker-button-outline	none	The outline of the buttons.
--clock-timepicker-button-padding	none	The padding of the buttons.
--clock-timepicker-button-shadow	none	The shadow of the buttons.
--clock-timepicker-face-color	#eeeeee	The color of the clock face.
--clock-timepicker-face-hover-color	#dddddd	The circle color when hovering over a number in the clock face.
--clock-timepicker-face-selection-color	inherit	The circle color of a selected number in the clock face. If not specified, uses the --clock-timepicker-accent-color as a fallback.
--clock-timepicker-font-family	Arial	The font family of the timepicker.
--clock-timepicker-header-background	inherit	The background color of the header. (mobile version) If not specified, uses the --clock-timepicker-accent-color as a fallback.
--clock-timepicker-header-font-color	#ffffff	The font color of the header. (mobile version)
--clock-timepicker-header-font-size	40px	The font size of the header. (mobile version)
--clock-timepicker-header-selection-background	rgba(255, 255, 255, 0.6)	The background of the time part selected in the header. (mobile version)
--clock-timepicker-inner-numbers-color	#888888	The color of the numbers in the clock face's inner circle.
--clock-timepicker-outer-numbers-color	#000000	The color of the numbers in the clock face's outer circle.
--clock-timepicker-popup-background	#ffffff	The background color of the popup.
--clock-timepicker-popup-border	none	The border of the popup.
--clock-timepicker-popup-border-radius	5px	The border radius of the popup.
--clock-timepicker-popup-shadow	rgba(0, 0, 0, 0.14) 0px 4px 20px 0px	The shadow of the popup.
--clock-timepicker-popup-size	200px	The size of the popup. (desktop version)

Keyboard inputs

Key	Description
Enter	Closes the popup and keeps the selected value.
Escape	Closes the popup and restores the previous value.
ArrowLeft	Navigates to the previous time part.
ArrowRight	Navigates to the next time part.
ArrowUp	Increments the current selected time part.
ArrowDown	Decrements the current selected time part.
Backspace Delete	Sets the selected time part to zero or removes time completely if time is 00:00 and option required is not set.
[0-9]	You can enter the digits directly by keyboard. The timepicker automatically jumps to the next time part or closes the popup when the maximum value is reached.
separator	Navigates to the next time part or closes the popup if last time part is reached.
+	Sets the time to positive (only supported if minimum or maximum is set to a negative value).
-	Sets the time to negative (only supported if minimum or maximum is set to a negative value).

Examples

Use it without any options. <clock-timepicker><clock-timepicker>

Use 12-hours format with am/pm. <clock-timepicker required autosize format="h:mm"><clock-timepicker>

Use another format to select seconds as well. <clock-timepicker required autosize format="HH:mm:ss"><clock-timepicker>

Set the precision to 15 minutes. <clock-timepicker required precision="15"><clock-timepicker>

Only allow times between 00:00 and 08:00. <clock-timepicker required minimum="00:00" maximum="08:00"><clock-timepicker>

Use it as a duration picker to select duration between -10:00 and 120:00 hours. <clock-timepicker required usePlusSign minimum="-10:00" maximum="120:00"><clock-timepicker>

Help

Submit a GitHub Issues request.

Changelog

Version 1.0.0
jquery-clock-timepicker completely refactored to work without jQuery as a modern standalone ES6 Web Component.

clock-timepicker 1.0.0