Feature

Mobile Support

Fully responsive with touch gestures and mobile-first design

Mobile-First Design

Timepicker-UI is designed with mobile devices in mind from the ground up. It automatically adapts to different screen sizes and provides an optimal touch experience on smartphones and tablets.

Responsive clock face that scales to fit screen
Touch-optimized controls with proper hit targets
Drag gestures for quick time selection
Full-screen modal on small devices
Prevents zoom on input focus

Touch Gestures

The timepicker supports intuitive touch interactions:

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

Mobile Configuration

The timepicker works great out of the box on mobile, but you can optimize it further:

Basic Mobile Setup

index.tstypescript

1const picker = new TimepickerUI(input, {
2  ui: {
3    mobile: true,       // Enable mobile optimizations
4    animation: true,    // Smooth animations
5    backdrop: true      // Full backdrop on small screens
6  }
7});
8
9picker.create();

Prevent Input Zoom

Add this meta tag to prevent unwanted zoom on input focus:

index.htmlhtml

1<meta 
2  name="viewport" 
3  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
4/>

Touch-Friendly Input

index.htmlhtml

1<input 
2  type="time"
3  id="timepicker"
4  inputmode="none"
5  readonly
6  style="font-size: 16px; min-height: 44px;"
7/>

Use inputmode="none" to prevent native keyboard on mobile and readonly to prevent typing.

Responsive Styling

Customize the appearance for different screen sizes:

Adaptive Clock Size

index.csscss

1/* Mobile - smaller clock */
2@media (max-width: 640px) {
3  .timepicker-ui-clock-face {
4    width: 260px !important;
5    height: 260px !important;
6  }
7}
8
9/* Tablet and desktop - larger clock */
10@media (min-width: 641px) {
11  .timepicker-ui-clock-face {
12    width: 320px !important;
13    height: 320px !important;
14  }
15}

Full Screen on Mobile

index.csscss

1@media (max-width: 640px) {
2  .timepicker-ui-wrapper {
3    width: 100% !important;
4    max-width: 100% !important;
5    border-radius: 0 !important;
6  }
7  
8  .timepicker-ui-modal {
9    padding: 20px !important;
10  }
11}

Progressive Web Apps

For PWA installations, ensure the timepicker adapts to display modes:

index.csscss

1/* Standalone PWA mode */
2@media (display-mode: standalone) {
3  .timepicker-ui-wrapper {
4    /* Add safe area insets for notched devices */
5    padding-top: env(safe-area-inset-top);
6    padding-bottom: env(safe-area-inset-bottom);
7  }
8}
9
10/* Handle landscape orientation */
11@media (orientation: landscape) and (max-height: 500px) {
12  .timepicker-ui-clock-face {
13    width: 220px !important;
14    height: 220px !important;
15  }
16}

React Native / Ionic

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

React Native WebView

index.tstypescript

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

Ionic Angular

index.tstypescript

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

Testing on Real Devices

Always test touch interactions on actual mobile devices, not just browser emulators. Touch behavior can differ significantly between devices and browsers. Pay special attention to drag gestures and tap targets on smaller screens.

Learn about input validation