Bootstrap Time Picker Premium component

Bootstrap time picker is a jQuery plugin which allows user to select a time in the Bootstrap form without the necessity of using custom JavaScript code.


Basic example

Initialization required

To use our Material TimePicker you have to initialize it first with the code below.


<div class="md-form">
    <input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
    <label for="input_starttime">Light version, 12hours</label>
</div>

// Time Picker Initialization
$('#input_starttime').pickatime({});

Twelve hour clock

Set 12 or 24 hour clock.


$('#input_starttime').pickatime({
    // 12 or 24 hour
    twelvehour: true,
});
            

Dark theme

Set darktheme clock.


$('#input_starttime').pickatime({
    // Light or Dark theme
    darktheme: true
});
            

Manual operations

Set default value, input without addon and manual operations.


<div class="md-form">
    <input type="text" id="manual-operations-input" class="form-control" placeholder="Now">
    <label for="form1" class="">Check the minutes</label>
</div>
                    

var input = $('#manual-operations-input').pickatime({
    autoclose: true,
    'default': 'now'
});

// Manually toggle to the minutes view
$('#check-minutes').click(function(e){
    e.stopPropagation();
    input.pickatime('show').pickatime('toggleView', 'minutes');
});
                    

Options

Name Default Description
default '' default time, 'now' or '13:14' e.g.
placement 'bottom' popover placement
align 'left' popover arrow align
donetext 'done' done button text
autoclose false auto close when minute is selected
vibrate true vibrate the device when dragging clock hand
fromnow 0 set default time to * milliseconds from now (using with default = 'now')
init callback function triggered after the colorpicker has been initiated
beforeShow callback function triggered before popup is shown
afterShow callback function triggered after popup is shown
beforeHide callback function triggered before popup is hidden
Note:  will be triggered between a beforeDone and afterDone
afterHide callback function triggered after popup is hidden
Note:  will be triggered between a beforeDone and afterDone
beforeHourSelect callback function triggered before user makes an hour selection
afterHourSelect callback function triggered after user makes an hour selection
beforeDone callback function triggered before time is written to input
afterDone callback function triggered after time is written to input