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

const picker = new TimepickerUI(input, {
  mobile: true,           // Enable mobile optimizations
  animation: true,        // Smooth animations
  backdrop: true          // Full backdrop on small screens
});

picker.create();

Prevent Input Zoom

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

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

Touch-Friendly Input

<input 
  type="time"
  id="timepicker"
  inputmode="none"
  readonly
  style="font-size: 16px; min-height: 44px;"
/>

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

/* Mobile - smaller clock */
@media (max-width: 640px) {
  .timepicker-ui-clock-face {
    width: 260px !important;
    height: 260px !important;
  }
}

/* Tablet and desktop - larger clock */
@media (min-width: 641px) {
  .timepicker-ui-clock-face {
    width: 320px !important;
    height: 320px !important;
  }
}

Full Screen on Mobile

@media (max-width: 640px) {
  .timepicker-ui-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  
  .timepicker-ui-modal {
    padding: 20px !important;
  }
}

Progressive Web Apps

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

/* Standalone PWA mode */
@media (display-mode: standalone) {
  .timepicker-ui-wrapper {
    /* Add safe area insets for notched devices */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Handle landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .timepicker-ui-clock-face {
    width: 220px !important;
    height: 220px !important;
  }
}

React Native / Ionic

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

React Native WebView

import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'https://your-app.com/timepicker' }}
  style={{ flex: 1 }}
  allowsInlineMediaPlayback={true}
  scrollEnabled={false}
/>

Ionic Angular

import { Component, OnInit } from '@angular/core';
import TimepickerUI from 'timepicker-ui';

@Component({
  selector: 'app-time-picker',
  template: `<input type="time" #timepicker />`
})
export class TimePickerComponent implements OnInit {
  @ViewChild('timepicker') input!: ElementRef;

  ngOnInit() {
    const picker = new TimepickerUI(this.input.nativeElement, {
      mobile: true,
      theme: 'basic'
    });
    picker.create();
  }
}

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