Mobile Support

The picker works with touch as well as mouse and keyboard, and its layout changes on narrow and landscape screens:

• The clock face is 256px. On landscape screens up to 480px tall the time fields and the clock face sit side by side.
• Each number on the clock face is a 32 by 32px tap target
• Drag gestures for quick time selection
• The backdrop covers the whole viewport, but the picker card does not: it is 328px wide, 315px on portrait screens 330px wide or less, and 584 by 360px for the clock view in landscape.
• The picker's own time fields use large text, so iOS Safari does not zoom in when they get focus. Your own input needs 16px text or more. See Touch-Friendly Input below.

On a touch screen, the clock view responds to:

Tap

Tap any number on the clock face to select that time instantly

Drag

Drag the clock hand around to smoothly select the desired time

Switch

Tap the hour/minute display to switch between hour and minute selection

AM/PM

In 12-hour mode, tap AM or PM buttons to toggle time of day

The default options work on touch screens. These settings change the view the picker opens in and how the input behaves:

Basic Mobile Setup

1const picker = new TimepickerUI(input, {
2  ui: {
3    initialView: 'keyboard', // Open in the keyboard input view
4    animation: true          // Smooth animations
5  }
6});
7
8picker.create();

ui.initialView is 'clock' by default. With 'keyboard', the picker opens with hour and minute fields to type into and the clock face hidden. The view does not depend on screen size. To let people switch between that view and the clock, also set ui.viewSwitch: true.

Switch Views from Outside

setView('clock' | 'keyboard') shows a view from your own button, and getView() reads it. While the picker is open the view changes at once and switch:view fires. While it is closed, the next open starts in that view, and later opens use ui.initialView again. Both do nothing in the wheel modes. New in 4.7.0.

1picker.setView('keyboard');
2
3picker.on('switch:view', ({ view }) => {
4  console.log('Now showing', view);
5});

Compact Keyboard View

For a smaller keyboard view, shrink the time fields and their numbers with CSS variables. New in 4.7.0.

1.tp-ui-wrapper {
2  --tp-size-input: 72px;
3  --tp-size-input-mobile: 56px;
4  --tp-time-input-font-size: 36px;
5}

Touch-Friendly Input

1<input
2  type="text"
3  id="timepicker"
4  style="font-size: 16px; min-height: 44px;"
5/>

The picker opens when the input is tapped or clicked, or when Enter or Space is pressed while it has focus. Keep the input's font-size at 16px or more: iOS Safari zooms the page in when a focused input has smaller text. min-height: 44px makes the input easy to tap.

Don't stop that zoom with maximum-scale=1 or user-scalable=no in the viewport meta tag. Some browsers then block pinch zoom too, and people who need larger text can no longer zoom in.

The picker card is .tp-ui-wrapper, inside the full-viewport .tp-ui-modal. The library already adjusts it for small screens:

Built-in Breakpoints

• The card is 328px wide and centered in the viewport. On portrait screens 330px wide or less it is 315px wide.
• On landscape screens up to 480px tall the open clock view switches to a horizontal layout, 584 by 360px.
• The keyboard input view in landscape takes its size from --tp-mobile-landscape-width and --tp-mobile-landscape-height. See Custom Styling.

Full Width on Phones

1@media (max-width: 640px) {
2  .tp-ui-wrapper {
3    width: 100% !important;
4    border-radius: 0 !important;
5  }
6}

!important beats the library's more specific width rules at the breakpoints above.

While primarily designed for web, you can use Timepicker-UI in hybrid apps:

React Native WebView

1import { WebView } from 'react-native-webview';
2
3<WebView
4  source={{ uri: 'https://your-app.com/timepicker' }}
5  style={{ flex: 1 }}
6  scrollEnabled={false}
7/>

Ionic Angular

1import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
2import { TimepickerUI } from 'timepicker-ui';
3
4@Component({
5  selector: 'app-time-picker',
6  template: `<input type="text" #timepicker />`
7})
8export class TimePickerComponent implements AfterViewInit, OnDestroy {
9  @ViewChild('timepicker') input!: ElementRef<HTMLInputElement>;
10  private picker?: TimepickerUI;
11
12  ngAfterViewInit() {
13    this.picker = new TimepickerUI(this.input.nativeElement);
14    this.picker.create();
15  }
16
17  ngOnDestroy() {
18    this.picker?.destroy();
19  }
20}

No mobile-specific options are needed in Ionic. To open the picker in the keyboard input view instead of the clock, pass ui: { initialView: 'keyboard', viewSwitch: true }. viewSwitch adds the button that switches to the clock and back. See Basic Mobile Setup above.