jQuery Timepicker和時間舍入問題

Question

我正在使用以下jQuery Timepicker庫：

http://jonthornton.github.io/jquery-timepicker/

https://github.com/jonthornton/jquery-timepicker

我希望用戶在06:00 PM到09.00 PM之間選擇一個事件。 當用戶選擇時間選擇器時，它將從最小時間開始到最大時間。 假設用戶在07:12 PM登錄，則需要向用戶顯示從08:00 PM或08:15 PM到最大時間09:00 PM之前1小時的日期。 如果時間超過最大時間，則要顯示提示音，表明時間已超過最大時間。 如果時間早於最小時間，則顯示從06:00 PM到09:00 PM的所有時間。

我正在var d中獲取當前本地時間。

d = Date.now();
d = new Date(d);
d = (d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");
console.log(d);

如何在考慮本地時間的情況下更改最短時間而不超過最大時間？

作為一個新手，此刻似乎讓我頭疼。 要求專家尋求幫助。

我的小提琴：

更新： https ： //jsfiddle.net/pamela_john/rh2t301w/33/

現在我有一個錯誤 ，如果當前時間是7.01 PM，並且最大時間是07:00 PM。 從12:00 AM開始，它將顯示不正確。 任何時候都類似。

 d = Date.now(); d = new Date(d); d = (d.getHours() > 12 ? d.getHours() - 12 : d.getHours()) + ':' + d.getMinutes() + ' ' + (d.getHours() >= 12 ? "PM" : "AM"); console.log(d); console.log(Intl.DateTimeFormat().resolvedOptions().timeZone); $(document).ready(function() { $(function() { $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': '06:00 PM', 'maxTime': '09:00 PM', 'step': 15 }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css"> <input type="text" id="time" value="" class="time" /> 

Answer 1

您需要檢查當前日期，並相應地更改您的minDate 。

這應該是您的代碼：

$(document).ready(function() {
  $(function() {
    var currentDate = new Date();
    var currentHour = currentDate.getHours();
    var currentMins = currentDate.getMinutes();
    var minTime = '01:00 PM';
    var maxTime = '03:00 PM';
    if (+maxTime.split(":")[0] + 12 <= currentHour) {
      alert("Sorry the time has passed !!!");
    } else {
      if (+minTime.split(":")[0] + 12 < currentHour) {
        minTime = currentHour > 12 ? currentHour - 12 : currentHour;
        if (currentMins > 44) {
          minTime++;
          minTime += ":00 PM";
        } else if (currentMins < 44 && currentMins > 30) {
          minTime += ":45 PM";
        } else if (currentMins < 30 && currentMins > 15) {
          minTime += ":30 PM";
        } else if (currentMins < 15)
          minTime += ":15 PM";
      }
    }

    $('input#time').timepicker('remove').timepicker({
      'timeFormat': 'h:i A',
      'disableTextInput': true,
      'minTime': minTime,
      'maxTime': maxTime,
      'step': 15
    });
  });
});

演示：

 $(document).ready(function() { $(function() { var currentDate = new Date(); var currentHour = currentDate.getHours(); var currentMins = currentDate.getMinutes(); var minTime = '01:00 PM'; var maxTime = '03:00 PM'; if (+maxTime.split(":")[0] + 12 <= currentHour) { alert("Sorry the time has passed !!!"); } else { if (+minTime.split(":")[0] + 12 < currentHour) { minTime = currentHour > 12 ? currentHour - 12 : currentHour; if (currentMins > 44) { minTime++; minTime += ":00 PM"; } else if (currentMins < 44 && currentMins > 30) { minTime += ":45 PM"; } else if (currentMins < 30 && currentMins > 15) { minTime += ":30 PM"; } else if (currentMins < 15) minTime += ":15 PM"; } } $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': minTime, 'maxTime': maxTime, 'step': 15 }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css"> <input type="text" id="time" value="" class="time" /> 

Answer 2

如果我正確閱讀了您的問題，您可能想要這樣的東西，我試圖正確地四舍五入，但是您需要進行測試

 function pad(num) { return String("0" + num).slice(-2) } function roundQuarter(d) { var date = new Date(d.getTime()); // https://stackoverflow.com/a/4968292/295783 date.setMinutes(((date.getMinutes() + 7.5) / 15 | 0) * 15) % 60; date.setHours((((date.getMinutes() / 105) + .5) | 0) + date.getHours()) % 24; return date; } var min = 9, // test time max = 11, d = new Date(); var minDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), min, 0, 0); var maxDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), max, 0, 0); if (d > minDate.getTime()) minDate = roundQuarter(d); var minString = pad(minDate.getHours() > 12 ? minDate.getHours() - 12 : minDate.getHours()) + ':' + pad(minDate.getMinutes()) + ' ' + (minDate.getHours() >= 12 ? "PM" : "AM"); var maxString = pad(maxDate.getHours() > 12 ? maxDate.getHours() - 12 : maxDate.getHours()) + ':' + pad(maxDate.getMinutes()) + ' ' + (maxDate.getHours() >= 12 ? "PM" : "AM"); console.log(d, minString, maxString); $(document).ready(function() { $(function() { if (d > maxDate) { $('input#time').val("too late").prop("disabled", true); } else { $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': minString, 'maxTime': maxString, 'step': 15 }); } }); $(document).on('click', '.ui-state-disabled', function() { alert('Invalid date') }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css"> <input type="text" id="time" value="" class="time" />