Jquery Timepicker - 从当前时间安排时间到 6 小时 [英] Jquery Timepicker - schedule time to 6hrs from current time

问题描述

我使用了 jquery timepicker，如下

I have used a jquery timepicker, as below

下面是我的代码:

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

我的问题是我比当前时间提前了 6 小时，但我还需要禁用之前的时间.

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

例如:

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

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?

推荐答案

我认为你所追求的是

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

这篇关于Jquery Timepicker - 从当前时间安排时间到 6 小时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！