Configuration

Complete list of configuration options

Basic Options

Option	Type	Default	Description
`clockType`	12h \| 24h	`12h`	Clock format
`theme`	string	`basic`	Theme name
`animation`	boolean	`true`	Enable animations
`backdrop`	boolean	`true`	Show backdrop overlay
`editable`	boolean	`false`	Allow manual input
`focusTrap`	boolean	`true`	Trap focus in modal
`enableScrollbar`	boolean	`false`	Keep page scrollable
`mobile`	boolean	`false`	Force mobile mode

Labels

{
  amLabel: 'AM',
  pmLabel: 'PM',
  okLabel: 'OK',
  cancelLabel: 'CANCEL',
  timeLabel: 'Select Time',
  hourMobileLabel: 'Hour',
  minuteMobileLabel: 'Minute'
}

Inline Mode

{
  inline: {
    enabled: true,
    containerId: 'timepicker-container',
    autoUpdate: true,
    showButtons: false
  }
}

Disabled Time

Disable specific hours, minutes, or time ranges:

{
  disabledTime: {
    hours: [1, 3, 5, 23],
    minutes: [15, 30, 45],
    interval: ['10:00 AM - 2:00 PM', '5:00 PM - 8:00 PM']
  }
}

Current Time

{
  currentTime: {
    updateInput: true,
    locales: 'en-US',
    time: new Date()
  }
}

Complete Example

const picker = new TimepickerUI(input, {
  clockType: '24h',
  theme: 'dark',
  animation: true,
  backdrop: true,
  focusTrap: true,
  editable: false,
  mobile: false,
  enableScrollbar: false,
  
  okLabel: 'Confirm',
  cancelLabel: 'Close',
  timeLabel: 'Choose Time',
  
  incrementHours: 1,
  incrementMinutes: 5,
  
  disabledTime: {
    hours: [0, 1, 2, 3],
    interval: ['12:00 PM - 1:00 PM']
  },
  
  onConfirm: (data) => console.log(data),
  onCancel: () => console.log('cancelled'),
  onUpdate: (data) => console.log('updated:', data)
});