How to reinitialize or reset Jonthornton's jQuery timepicker?

Question

I am using this plugin in my application.

I have two textboxes, id="order_at" for datepicker, and id="order_time" for timepicker.

<input type="text" name="order_at" id="order_at" readonly="" value=""/>
<input type="text" name="order_time" id="order_time" value=""/>

For the datepicker, I am setting the value of the textbox (order_at) with current date (since I am blocking past dates).

var lastDate = new Date();
lastDate.setDate(lastDate.getDate());
$('#order_at').datepicker({ 
       format: "yyyy-mm-dd",
       autoclose: true,
       minDate: 0,
       startDate: '-0m'
});
$("#order_at").datepicker('setDate', lastDate);

Since I am putting its value as current date when initializing the datepicker, I want to block the past hours of current date. For example, if now it is 14:00, then the timepicker will list hours from 14:00 onwards.

var d = new Date();  
var chDate = d.getDate();
var chMonth = d.getMonth();
var chYear = d.getFullYear();
var hour = d.getHours();  
var min = d.getMinutes(); 

if(chDate < 10)
  chDate = '0' + chDate;
if(parseInt(chMonth + 1) < 10)
  chMonth = '0' + parseInt(chMonth + 1);
var currentDate = chYear + '-' + chMonth + '-' + chDate;

var modhr = (hour + 1);
if(min < 10)
  var output = modhr + ':0' + min;
else 
  var output = modhr + ':' + min;

$("#order_time").val(output); 
$('#order_time').timepicker({
     'timeFormat': 'H:i',
     'maxTime': '23:00',
     'minTime': output
});

Now my concern is to see if the user selects a future date. In that case, I need to reset the minTime of the timepicker to the starting hours of the day, say 06:00.

Here's the code to handle that factor:

$('#order_at').on('change',function(){
  if($(this).val() == currentDate)
  {
      $("#order_time").val(output);
      $('#order_time').timepicker(); 
      $('#order_time').timepicker({
         'timeFormat': 'H:i',
         'maxTime': '23:00',
         'minTime': output
      });
  }
  else
  {
     $('#order_time').timepicker();
     $('#order_time').timepicker({
        'timeFormat': 'H:i',
        'maxTime': '23:00',
        'minTime': '06:00'
     });
  }
});

However, the hour list isn't getting updated when the oder_at textbox value in changing. It is always showing the list starting from 06:00.

How can I fix this?

Answer 1

After doing some research, I found a solution which is not mentioned in the doc.

This is how the timepicker in initialized:

$('#order_time').timepicker({
     'timeFormat': 'H:i',
     'maxTime': '23:00',
     'minTime': output,
     'step' : 20
  });

Now to reinitialize a specific option, it can be done like this:-

$('#id_of_object').timepicker('option', { '<the option>: '<The value you want to put>' });

So, in my case, the script would be:-

$('#order_at').on('change',function(){
   if($(this).val() == currentDate)
   {
      $('#order_time').timepicker('option', { minTime: output });
   }
   else
   {
      $('#order_time').timepicker('option', { minTime: '06:00' });
   }
});