Clockface timepicker for Twitter Bootstrap

Input

Attached to input element:

Source

Component

Attached to readonly input with appended button:

Source

Inline

Attached to div element:

Source

Options

format

String. Default: H:mm

Time format. Possible tokens are: H,h,m,a.
If set H or HH - it's 24h format, central link works as 0-11 / 12-23 toggle.
If set h or hh - it's 12h format, central link works as AM / PM toggle.

trigger

String. Default: focus

How to trigger clockface.
Possible values: focus|manual.
If set focus it's applied only when attached to input.

Methods

.clockface(options)

Initializes widget.

$('#time').clockface({format: 'HH:mm'});

show

Arguments:

• time (string|object) [optional]

Shows widget.

$('#time').clockface('show', '12:30');

hide

Hides widget.

$('#time').clockface('hide');

toggle

Arguments:

• time (string|object) [optional]

Toggles show/hide.

$('#time').clockface('toggle');

setTime

Arguments:

• time (string|object)

Sets time of widget.

$('#time').clockface('setTime', '2:30');

getTime

Arguments:

• asObject (boolean). Default: false

Returns time in specified format. If asObject = true returns object containing hour, minute and ampm values.

var s = $('#time').clockface('getTime');

Events

shown.clockface

Fires when widget was shown.

$('#time').on('shown.clockface', 
function(e, data) {
  alert(data.hour);
});

All events have second parameter data with current hour, minute and ampm values.

hidden.clockface

Fires when widget was hidden.

pick.clockface

Fires every time when user picks hour, minute or am/pm.