how to disable the button in bootstrap time picker

Question

I am using adminLTE template,from this template I am using one form field called time picker , from here I am clicking decrement button it will be decrement time same like increment button also, but for my convenience, suppose now time 4.15 means, now I have click the decrement button when time equal to 2.15 this time I want to do unclickable that decrement button, how can I do it? Please help me someone, here I show only the decrement function:

 <script> $(function () { //Date range picker with time picker $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'}); //Timepicker $(".timepicker").timepicker({ showInputs: false }); }); </script> <script> decrementHour: function() { if (this.showMeridian) { if (this.hour === 1) { this.hour = 12; } else if (this.hour === 12) { this.hour--; return this.toggleMeridian(); } else if (this.hour === 0) { this.hour = 11; return this.toggleMeridian(); } else { this.hour--; } } else { if (this.hour === 0) { this.hour = 23; } else { this.hour--; } } this.update(); }, </script>

 <div class="bootstrap-timepicker"> <div class="bootstrap-timepicker-widget dropdown-menu"> <table> <tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">10</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">AM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr> </tbody> </table> </div> <div class="form-group"> <div class="input-group" style="margin-right: 14px;margin-left: 14px"> <input type="text" class="form-control timepicker" id="start_time" name="start_time"> <div class="input-group-addon"> <i class="fa fa-clock-o"></i> </div> </div> </div> </div> </div>

Answer 1

You can add disabled word in class where the user selects for picking the date. Also you need to add in css as

.disabled {
 pointer-events: none;
}

This would work as Bootstrap don't have default disabled feature. But styling alone present.