CODEWITHSUNDEEP
jqueryhtmltimepicker
AhKing
AhKing

Reputation: 191

jonthornton timepicker - disable second time after choosing first time

As title said, how to disable previous time range after choosing the first time duration. Words can't describe my problem. So i provide some coding to clarify it more.

My html timepicker looks like this:

<div class="row">
  <div class="col"><b>Time (From)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timefrom1">
  </div>
</div>

<div class="row">
  <div class="col"><b>Time (To)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timeto1">
  </div>
</div>

Have Time (from) and Time (to) which is more like duration. Oh and first of all im using jonthornton timepicker. So my js timepicker script looks like this:

$('body').on('focus',".time_picker",function(){
    $(this).timepicker({
        'minTime': '1.00am',
        'timeFormat': 'H:i:s', 
        'stopScrollPropagation': 'true',
        'showOnFocus': 'true',
        'disableTextInput': 'true',
        'disableTouchKeyboard': 'true',
    });
});

My problem is that i want to disable the previous time range AFTER the Time (from) has been choosed. Which means that when focus on Time (to), i want to change the range for selection time is after that Time (From)

For example, if Time (from) time choosed is 04:00:00 (24 format) . Then when focus on Time (to) the range between 04:00:00, 03:00:00 and so on is disable. Only 04:00:00, 05:00:00 and continue is available.

Need assistance.

UPDATE: Apology for nonsense english. Let just say i want to avoid the user from picking the time that pass one day such as Time (From) = 04:00:00 and Time (To) = 02:00:00 for example

Upvotes: 1

Views: 772

Answers (1)

BenG
BenG

Reputation: 15164

use the changeTime on the from time and set the to time with .timepicker('option', 'minTime', value)

$('#timefrom1, #timeto1').timepicker({
  'minTime': '1.00am',
  'timeFormat': 'H:i:s',
  'stopScrollPropagation': 'true',
  'showOnFocus': 'true',
  'disableTextInput': 'true',
  'disableTouchKeyboard': 'true',
});

$('#timefrom1').on('changeTime', function() {

  var values = $(this).val().split(':');
  if (values[1] == '00') {
    values[1] = '30';
  } else {
    values[0] = +values[0] + 1;
    values[1] = '00';
  }

  $('#timeto1').timepicker('option', 'minTime', values.join(':'));
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>

<div class="row">
  <div class="col"><b>Time (From)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timefrom1">
  </div>
</div>

<div class="row">
  <div class="col"><b>Time (To)</b>
  </div>
  <div class="col">
    <input type="text" class="time_picker" id="timeto1">
  </div>
</div>

Upvotes: 2

Related Questions