Options

Complete configuration options reference

Basic Options

Option	Type	Default	Description
`amLabel`	`string`	`"AM"`	Custom text for AM label
`animation`	`boolean`	`true`	Enable/disable open/close animations
`appendModalSelector`	`string`	`""`	DOM selector to append timepicker (defaults to body)
`backdrop`	`boolean`	`true`	Show/hide backdrop overlay
`cancelLabel`	`string`	`"CANCEL"`	Text for cancel button
`clockType`	`"12h" \| "24h"`	`"12h"`	Clock format type
`cssClass`	`string`	`undefined`	Additional CSS class for timepicker wrapper
`delayHandler`	`number`	`300`	Debounce delay for buttons (ms)
`editable`	`boolean`	`false`	Allow manual input editing
`enableScrollbar`	`boolean`	`false`	Keep page scroll when picker is open
`enableSwitchIcon`	`boolean`	`false`	Show desktop/mobile switch icon
`focusInputAfterCloseModal`	`boolean`	`false`	Focus input after closing modal
`focusTrap`	`boolean`	`true`	Trap focus within modal
`hourMobileLabel`	`string`	`"Hour"`	Hour label for mobile version
`id`	`string`	`undefined`	Custom ID for timepicker instance
`incrementHours`	`number`	`1`	Hour increment step (1, 2, 3)
`incrementMinutes`	`number`	`1`	Minute increment step (1, 5, 10, 15)
`minuteMobileLabel`	`string`	`"Minute"`	Minute label for mobile version
`mobile`	`boolean`	`false`	Force mobile version
`mobileTimeLabel`	`string`	`"Enter Time"`	Time label for mobile version
`okLabel`	`string`	`"OK"`	Text for OK button
`pmLabel`	`string`	`"PM"`	Custom text for PM label
`switchToMinutesAfterSelectHour`	`boolean`	`true`	Auto-switch to minutes after hour selection
`theme`	`Theme`	`"basic"`	UI theme (see themes section)
`timeLabel`	`string`	`"Select Time"`	Time label for desktop version

Themes

Choose from 9 built-in themes:

`basic`

Default Material Design theme

`crane-straight`

Google Crane theme with straight edges

`crane-radius`

Google Crane theme with rounded edges

`m3`

Material Design 3 (Material You)

`dark`

Dark mode theme

`glassmorphic`

Modern glass effect

`pastel`

Soft pastel colors

`ai`

Futuristic AI-inspired theme

`cyberpunk`

Neon cyberpunk aesthetic

const picker = new TimepickerUI(input, {
  theme: 'cyberpunk'
});

Inline Mode

Display timepicker without modal overlay:

const picker = new TimepickerUI(input, {
  inline: {
    enabled: true,
    containerId: 'timepicker-container',
    showButtons: false,  // Hide OK/Cancel buttons
    autoUpdate: true     // Auto-update input on change
  }
});

Disabled Time

Disable specific hours, minutes, or time ranges:

const picker = new TimepickerUI(input, {
  disabledTime: {
    hours: [1, 3, 5, 8],              // Disable specific hours
    minutes: [15, 30, 45],            // Disable specific minutes
    interval: '10:00 AM - 2:00 PM'    // Disable time range
    // Or multiple ranges:
    // interval: ['10:00 AM - 2:00 PM', '5:00 PM - 8:00 PM']
  }
});

Current Time

Set current time to input and picker:

const picker = new TimepickerUI(input, {
  currentTime: {
    updateInput: true,
    locales: 'en-US',
    time: new Date()
  }
});

Custom Labels

Customize all text labels:

const picker = new TimepickerUI(input, {
  amLabel: 'AM',
  pmLabel: 'PM',
  okLabel: 'Confirm',
  cancelLabel: 'Close',
  timeLabel: 'Choose Time',
  hourMobileLabel: 'Hour',
  minuteMobileLabel: 'Minute',
  mobileTimeLabel: 'Enter Time'
});

Complete Example

const picker = new TimepickerUI(input, {
  // Display
  theme: 'dark',
  clockType: '24h',
  animation: true,
  backdrop: true,
  
  // Behavior
  focusTrap: true,
  editable: false,
  mobile: false,
  enableScrollbar: false,
  switchToMinutesAfterSelectHour: true,
  
  // Labels
  okLabel: 'Confirm',
  cancelLabel: 'Close',
  timeLabel: 'Choose Time',
  
  // Increments
  incrementHours: 1,
  incrementMinutes: 5,
  
  // Restrictions
  disabledTime: {
    hours: [0, 1, 2, 3],
    interval: '12:00 PM - 1:00 PM'
  },
  
  // Current time
  currentTime: {
    updateInput: true,
    time: new Date()
  },
  
  // Custom ID
  id: 'my-timepicker',
  
  // Custom class
  cssClass: 'custom-picker'
});