首页 > 解决方案 > jQuery UI datetimepicker:禁用当前时间和过去时间。在未来日期启用所有时间

问题描述

我在禁用当前时间前遇到了一些麻烦。如果日期时间是 2018 年 12 月 12 日 - 上午 10:00 和所有过去的时间上午 10:00 之前需要禁用。

但是,我想找到一种方法,然后在选择未来日期并重新启用这些时间时重新启用这些时间。

这是小提琴。http://jsfiddle.net/arunpjohny/rngwefrh/4/

var min = new Date(),
  strMin = $.datepicker.formatDate("mm/dd/yy", min);
min.setHours(min.getHours() + 6);
min.setMinutes(min.getMinutes() + (15 - min.getMinutes() % 15))
$('#datePicker').datepicker({
  minDate: min,
  onSelect: function(v) {
    $('#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')
}

<input id="datePicker" />
<input id="timePicker" />

最重要的是这个问题:Jquery Timepicker - schedule time to 6hrs from current time


然后我发现了另一个小提琴,它被顶部的同一个stackoverflow问题所采用,这与我正在寻找的类似:https ://jsfiddle.net/n23h6ac1/

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()+1*3600*1000);
$('#timePicker').timepicker({
        'step': 15,
    'forceRoundTime': true,
    'timeFormat': 'H:i',
    'disableTimeRanges': [
        [0, formatAMPM(time_plus_6)]
    ]
});

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

<input id="timePicker">

但是,这确实会禁用当前时间过去时间,但它会在选择另一个未来日期时重新​​启用所有时间。

我为这个冗长的问题道歉。任何帮助都会很棒!

标签: javascriptjqueryjquery-uijquery-ui-datepickerdatetimepicker

解决方案


推荐阅读