Search code examples
javascripttimepicker

Jquery Timepicker - schedule time to 6hrs from current time

I have used a jquery timepicker, as below

jQuery timepicker Below is my code : 

$('#timePicker').timepicker({
    'step': 15,
    'forceRoundTime': true,
    'timeFormat': 'H:i'
});
$('#timePicker').timepicker('setTime', new Date(new Date().getTime()+6*3600*1000));

My problem is that I am getting 6hrs ahead of my current time, but I also need to disable the previous time.

For example:

If current date time is 04th April, 2016 11.50 AM - then the time picker should show 04th April, 2016 17.50 PM, and if date is not today then time picker should allow all time to select.

Please let me know what changes should I make in my code?

Solution

  • I think what you are after is

    var min = new Date(),
  strMin = $.datepicker.formatDate("mm/dd/yy", min);
min.setHours(min.getHours() + 6);
$('#datePicker').datepicker({
  minDate: min,
  onSelect: function(v) {
    console.log(v == strMin ? formatTime(min) : '12:00am')
    $('#timePicker').timepicker('option', 'minTime', v == strMin ? formatTime(min) : '12:00am');
  }
}).datepicker('setDate', min);

$('#timePicker').timepicker({
  'step': 15,
  'forceRoundTime': true,
  'timeFormat': 'H:i',
  'minTime': formatTime(min)
});
$('#timePicker').timepicker('setTime', min);


function formatTime(dt) {
  return dt.getHours() + ':' + ('0' + dt.getMinutes()).slice(-2) + (dt.getHours() >= 12 ? 'pm' : 'am')
}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.11/jquery.timepicker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.11/jquery.timepicker.js"></script>
<input id="datePicker" />
<input id="timePicker" />