With bootstrap timepicker plugin, one can select time similar to datepicker (we select date, month, year from datepicker). With bootstrap timepicker plugin, we can select hour, minutes and meridian. In the following screenshot, you can understand, what timepicker does:
Screenshot 1
In short, this is how to use the timepicker:
<input id="timepicker1" type="text" class="form-control input-small" /> <script> $(document).ready(function() { $('#timepicker1').timepicker(); }); </script>
For details read here: https://jdewit.github.io/bootstrap-timepicker/
There are situations when we need to do extra things with this plugin like we want to stop manual editing of textbox with id “timepicker1”. This textbox should be editable using timepicker only. User should not be able to write anything in the textbox. Similar to this, other situations may arise like:
1. Set selectable time slots according to different requirements.
2. Disable showing of the timepicker widget on clicking of time symbol of textbox.
3. Enable showing of time picker widget on clicking of time symbol button of textbox using jQuery.
Now, we will discuss how we can achieve above operations inn time picker plugin.
Stop Manual entry of user on textbox having id “timepicker1”.
We can achieve this by following two ways:
Add onkeydown attribute/event to the ‘#timepicker1’ textbox as follows:
<input id="timepicker1" type="text" class="form-control input-small" onkeydown=”return false;”/>
Using jQuery keydown event. For this, we can write following code in script:
$(document).ready(function() {
$('#timepicker1').keydown(function(){
return false;});
});
Set time of widget according to different conditions.
The current time will be displayed on both textbox and timepicker widget. But suppose, we want to set time of textbox and timepicker widget according to requirements and different situations and don’t want that timepicker should display current time.
For example, we want that when department name is changed then timepicker time should also be changed.
We can do this by the following script:
$('#department').change(function(){
if($(this).val() == 1)
time = '9:30 AM';
else if($(this).val() == 2)
time = '10:30 AM';
else
time = '8:30 AM';
$('#timepicker1').val(time); // set #timepicker textbox value
$('#timepicker1').timepicker('setTime', time); // set widget time according to department change
});
See following screenshots:
Screenshot 2
Screenshot 3
In screenshot 3, no department is selected on page load, therefore, it is displaying current time on textbox and time picker widget both. In screenshot 4, textbox and widget time have been set according to department selection.
Disable showing of time picker widget on clicking of time symbol of textbox
Suppose select input and timepicker textbox are made read-only and we cannot edit anything. When textbox is readonly, it means our requirement also mandates that time picker widget should not be opened when user try to click on time symbol button at end of the textbox.
I made select and textbox as readonly by appending readonly attribute to these fields. But timepicker widget is still displaying when I clicked on time symbol button of textbox:
Screenshot 4
Let’s see how we can stop widget to be opened when we don’t want widget to be opened.
We have modified basic time picker function as follows:
$('#timepicker1').timepicker({‘template’ : false});
By passing template variable to timepicker function at page load, we can stop timepicker widget should not be opened. Please see the following screenshot:
Screenshot 5
This time widget not opened when I clicked on time symbol button of textbox.
Enable showing of timepicker widget on clicking of time symbol button of textbox using jQuery.
Now, I have already disabled opening of timepicker widget on document load function. In the documentation of timepicker plugin, it is not clearly explained how to open widget and set time etc operations using jQuery later on:
Screenshot 6
Above screenshot is taken from bootstrap-timepicker plugin documentation that shows the timepicker events which can be handled using jquery. But those events didn’t work for me, but they did give me direction to enable timepicker widget to work.
Let’s see how I handled those events and enable the timepicker widget to work.
In screenshot 6, events are written as:
$(‘#timepicker’).click(function(){
// timepicker is id of textbox
});
But this didn’t work when I tried.
Try with either
$(‘.timepicker’) or $(‘#timepicker’).parents(‘.timepicker’).
On click of “Enable” button, every field will be made editable, means the readonly property will be removed:
$('#enable').click(function(e){
e.preventDefault();
$('#timepicker1').prop("readonly", false);
$('#department').removeAttr("readonly");
$('#timepicker1').parents('.timepicker').click(function (){
/* click event for time symbol button of textbox to set time and show timepicker widget. */
if (! $('#timepicker1').is('[readonly]') ){
$('#timepicker1').parents('.timepicker').timepicker('setTime', $('#timepicker1').val());
$('#timepicker1').parents('.timepicker').timepicker('showWidget');
}
});
/* With click event widget is opened, but when we change time with up and down arrows of widget, then time on textbox doesn’t change, so we need following event also after enabling timepicker */
$('#timepicker1').parents('.timepicker').timepicker().on('changeTime.timepicker', function(e) {
if (! $('#timepicker1').is('[readonly]') ){
$('#timepicker1').val(e.time.value);
}
});
});