The Time Picker§

The basic setup requires targetting an input element and invoking the picker:

$('.timepicker').pickatime()

Options§

With the basic invocation above, these are the default settings:

// Translations and clear button
clear: 'Clear',

// Formats
format: 'h:i A',
formatLabel: undefined,
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',

// Editable input
editable: undefined,

// Time intervals
interval: 30,

// Time limits
min: undefined,
max: undefined,

// Disable times
disable: undefined,

// Root container
container: undefined,

// Events
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,

// Classes
klass: {

    // The element states
    input: 'picker__input',
    active: 'picker__input--active',

    // The root picker and states *
    picker: 'picker picker--time',
    opened: 'picker--opened',
    focused: 'picker--focused',

    // The picker holder
    holder: 'picker__holder',

    // The picker frame, wrapper, and box
    frame: 'picker__frame',
    wrap: 'picker__wrap',
    box: 'picker__box',

    // List of times
    list: 'picker__list',
    listItem: 'picker__list-item',

    // Time states
    disabled: 'picker__list-item--disabled',
    selected: 'picker__list-item--selected',
    highlighted: 'picker__list-item--highlighted',
    viewset: 'picker__list-item--viewset',
    now: 'picker__list-item--now',

    // Clear button
    buttonClear: 'picker__button--clear',
}

Translations§

Coming soon...

Clear Button§

Change the text or hide the button completely by passing a false-y value:

$('.timepicker').pickatime({
    clear: ''
})

Formats§

Display a human-friendly label and input format and use an alternate one to submit.

This is done by creating a new hidden input element with the same name attribute as the original and an optional prefix/suffix:

$('.timepicker').pickatime({
    // Escape any “rule” characters with an exclamation mark (!).
    format: 'T!ime selected: h:i a',
    formatLabel: '<b>h</b>:i <!i>a</!i>',
    formatSubmit: 'HH:i',
    hiddenPrefix: 'prefix__',
    hiddenSuffix: '__suffix'
})

The formatLabel option is unique. It can contain HTML and it can also be a function if you want to create the label during run-time:

$('.timepicker').pickatime({
    formatLabel: function(time) {
        var hours = ( time.pick - this.get('now').pick ) / 60,
            label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now'
        return  'h:i a <sm!all>' + ( hours ? Math.abs(hours) : '' ) + label + '</sm!all>'
    }
})

Formatting Rules§

The following rules can be used to format any time:

Rule	Description	Result
h	Hour in 12-hour format	1 – 12
hh	Hour in 12-hour format with a leading zero	01 – 12
H	Hour in 24-hour format	0 – 23
HH	Hour in 24-hour format with a leading zero	00 – 23
i	Minutes	00 – 59
a	Day time period	a.m. / p.m.
A	Day time period in uppercase	AM / PM

Editable input§

By default, typing into the input is disabled by giving it a readOnly attribute. Doing so ensures that virtual keyboards don’t pop open on touch devices. It is also a confirmation that formats passed to the server will be consistent.

However, this behavior can be changed using the editable option:

$('.datepicker').pickadate({
    editable: true
})

Intervals§

Choose the minutes interval between each time in the list:

$('.datepicker').pickadate({
    interval: 150
})

Time Limits§

Set the minimum and maximum selectable times on the picker.

1) Using arrays formatted as [HOUR,MINUTE]:

$('.timepicker').pickatime({
    min: [7,30],
    max: [14,0]
})

2) As times relative to now using integers or a boolean:

$('.timepicker').pickatime({
    // An integer (positive/negative) sets it as intervals relative from now.
    min: -5,
    // `true` sets it to now. `false` removes any limits.
    max: true
})

Disable Times§

Disable a specific or arbitrary set of times selectable on the picker.

1) Using arrays formatted as [HOUR,MINUTE]:

$('.timepicker').pickatime({
    disable: [
        [0,30],
        [2,0],
        [8,30],
        [9,0]
    ]
})

2) Using integers representing hours (from 0 to 23):

$('.timepicker').pickatime({
    disable: [
        3, 5, 7
    ]
})

3) Disabling all except a specific or arbitrary set of times by setting true as the first item in the collection:

$('.timepicker').pickatime({
    disable: [
        true,
        3, 5, 7,
        [0,30],
        [2,0],
        [8,30],
        [9,0]
    ]
})

4) Enabling/disabling ranges with exceptions by passing 'inverted' as the last parameter in the item within the collection:

$('.timepicker').pickatime({
    disable: [
        1,
        [1, 30, 'inverted']
    ]
})

container§

By default, the picker’s root element is inserted right after the input element. Specify where to insert the root element by passing any valid CSS selector to this option:

$('.timepicker').pickatime({
    container: '#root-outlet'
})

events§

Fire off events as the user interacts with the picker:

$('.timepicker').pickatime({
    onStart: function() {
        console.log('Hello there :)')
    },
    onRender: function() {
        console.log('Whoa.. rendered anew')
    },
    onOpen: function() {
        console.log('Opened up')
    },
    onClose: function() {
        console.log('Closed now')
    },
    onStop: function() {
        console.log('See ya.')
    },
    onSet: function(event) {
        console.log('Just set stuff:', event)
    }
})

Within scope of all six of these events, this refers to the picker.

The onSet event is the only callback that is passed an event argument that provides a bit of context as to which properties are being “set”.