1

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>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
kasthuri S
  • 39
  • 1
  • 7

1 Answers1

0

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.

Elanchezhiyan P
  • 86
  • 9