Time picker MDB Pro component
Bootstrap Time Picker
Bootstrap time picker is a jQuery plugin which allows the user to select a time in the Bootstrap form without the necessity of using custom JavaScript code.
Basic examples
The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
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 either a 12- or 24-hour clock.
<div class="md-form">
<input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
<label for="input_starttime">Twelve hour clock</label>
</div>
$('#input_starttime').pickatime({
// 12 or 24 hour
twelvehour: true,
});
Dark theme
Set a darktheme clock.
<div class="md-form">
<input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
<label for="input_starttime">Dark theme</label>
</div>
$('#input_starttime').pickatime({
// Light or Dark theme
darktheme: true
});
Manual operations
Set a 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');
});
Default Time Picker
<div class="md-form mx-5 my-5">
<input type="time" id="inputMDEx1" class="form-control">
<label for="inputMDEx1">Choose your time</label>
</div>
Access from outside
You can open Time Picker by clicking on another element.
If you want to do this, you have to add .time-picker-opener class and data-open="TimePickerID" HTML data-* Attribute on opening element.
<div class="md-form mx-5 my-5">
<input placeholder="Selected time" type="text" id="myTimePicker" class="form-control timepicker">
<label for="myTimePicker">Try me...</label>
<button class="time-picker-opener btn btn-primary btn-sm" data-open="myTimePicker">Open</button>
</div>
$( document ).ready(function() {
// Time Picker Initialization
$('.timepicker').pickatime({});
});
Minimum and Maximum range
Limit the range of time to choose. You can use it with 12hours and 24hours Time picker
<div class="md-form">
<input placeholder="Selected time" type="text" id="input-limited-range" class="form-control timepicker">
<label for="input-limited-range">Try me</label>
</div>
$( document ).ready(function() {
$('#input-limited-range').pickatime({
twelvehour: true,
min: "8:20am",
max: "5:15pm"
});
});
Date and Time Picker
You can use Time Picker and Date Picker together as a one component.
If you want to do this, you have to use input with .date-time class. You have to use also data-open="DatePickerID" HTML data-* Attribute and .time-date-ghost class.
Using several Date and Time Pickers
The important thing is to initialize every Date Time Picker as in the example below.
<div class="md-form mx-5 my-5">
<input placeholder="Date and Time" type="text" data-open="picker2" class="form-control date-time picker-opener">
<input placeholder="Selected date" type="text" id="picker2" class="form-control time-date-ghost">
<input placeholder="Selected time" data-open="picker2" type="text" class="form-control timepicker time-date-ghost">
</div>
<div class="md-form mx-5 my-5">
<input placeholder="Date and Time" type="text" data-open="picker3" class="form-control date-time-2 picker-opener">
<input placeholder="Selected date" type="text" id="picker3" class="form-control time-date-ghost">
<input placeholder="Selected time" data-open="picker3" type="text" class="form-control timepicker time-date-ghost">
</div>
$( document ).ready(function() {
// Date Time Picker Initialization
$('.date-time').dateTimePicker();
$('.date-time-2').dateTimePicker();
});
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') |
| min | set maximum allow time range to select | |
| max | set minimum allow time range to select | |
| 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 |