Question 10857 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Laravel-9 jQuery Timepicker Disable specific time how?

$(document).ready(function(){
    $('#time').timepicker({
    timeFormat: 'h:mm a',
    interval: 60,
    minTime: '9',
    maxTime: '4:00pm',
    defaultTime: '9',
    startTime: '9:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    });
});

How can I disable/remove 12pm from the selection of this jQuery timepicker?
timepicker.co

9:00am
10:00am
11:00am
1:00pm
2:00pm
3:00pm
4:00pm

Tags:

2

Answers


  1. 0

    The timepicker library you’re using doesn’t have support for disabling time.

    Try this

    $(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm a',
        ...
        beforeShow: function(input, inst) {
            setTimeout(function() {
                inst.dpDiv.find('.ui_tpicker_time:contains("12:00 PM")').addClass('ui-disabled');
            }, 0);
        }
    });
});

    in CSS

    .ui-disabled {
    pointer-events: none;
    opacity: 0.5;
}
    Login or Signup to reply.
  2. 0 
                $(function() {
    $('#disableTimeRangesExample').timepicker({ 
        step: 60,
        minTime:'9:00 a' ,
        maxTime: '4:00 p',
        defaultTime: '9',
        startTime: '9:00 a',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
        'disableTimeRanges': [['12:00pm','12:01pm'],] 
          });
    });
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://www.jonthornton.com/jquery-timepicker/documentation-assets/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://www.jonthornton.com/jquery-timepicker/documentation-assets/bootstrap-datepicker.js"></script>

<link href="https://www.jonthornton.com/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://www.jonthornton.com/jquery-timepicker/jquery.timepicker.js"></script>


<div class="demo">
<input id="disableTimeRangesExample" type="text" class="time ui-timepicker-input" autocomplete="off">
   </div>

    You can try with disableTimeRanges option to disable the range of 12pm to 12:01pm in jQuery Timepicker

    $(function() {
$('#disableTimeRangesExample').timepicker({ 
step: 60,
minTime:'9:00 a' ,
maxTime: '4:00 p',
defaultTime: '9',
startTime: '9:00 a',
dynamic: false,
dropdown: true,
scrollbar: true,
disableTimeRanges': [['12:00pm','12:01pm']] 
      });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search