Jquery Timepicker - 从当前时间开始计划时间为6小时

Question

我使用了jquery timepicker，如下所示

以下是我的代码：

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

我的问题是我比现在的时间提前6小时，但我还需要禁用之前的时间。

例如：

如果当前日期时间是2016年4月4日上午11点50分 - 那么时间选择器应该显示2016年4月4日17.50 PM，如果日期不是今天，那么时间选择器应该允许所有时间选择。

请告诉我应该在代码中进行哪些更改？

Answer 1

我认为你所追求的是

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

Answer 2

最好的方法是始终在该函数中调用onHourShow函数和validate the selected date。我认为这样做会更好，因为用户disabled hours are still visible而不是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;
    }
});​

这是一个工作示例： http://jsfiddle.net/fgelinas/kUFgT/4/

Answer 3

根据documentation，您可以使用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);

工作fiddle