Jquery Timepicker - schedule time to 6hrs from current time

问题

I have used a jquery timepicker, as below

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?

回答1:

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" />

回答2:

best way to do that is to always call the onHourShow function and validate the selected date in that function. I think this is better because the disabled hours are still visible to the user instead of blank cells.

$('#date').datepicker({
    minDate: 0
});
$('#time').timepicker({
    onHourShow: function( hour ) { 
        var now = new Date();
        // compare selected date with today
        if ( $('#date').val() == $.datepicker.formatDate ( 'mm/dd/yy', now ) ) {
            if ( hour <= now.getHours() ) {
                return false;
            }
        }
        return true;
    }
});

here is a working example : http://jsfiddle.net/fgelinas/kUFgT/4/

回答3:

according to the documentation you can disable the previous time by using DisableTimeRanges

function formatAMPM(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + '' + ampm;
  return strTime;
}

time_plus_6 = new Date(new Date().getTime()+6*3600*1000);
$('#timePicker').timepicker({
        'step': 15,
    'forceRoundTime': true,
    'timeFormat': 'H:i',
    'disableTimeRanges': [
        [0, formatAMPM(time_plus_6)]
    ]
});

$('#timePicker').timepicker('setTime', time_plus_6);

working fiddle

来源：https://stackoverflow.com/questions/36395752/jquery-timepicker-schedule-time-to-6hrs-from-current-time

标签

javascript

timepicker