如果时间已过，则从选择框中删除代表时间的项目

Question

我有一个看起来像这样的选择框，其中我有从上午 5:00 到晚上 8:45 的时间，以 15 分钟为增量。在 JS 或 JQuery 中，我想在 JS/JQuery 中获取当前本地时间，然后删除当前时间之前的所有时间。前任。如果是下午 4:01，请删除下午 4:15 之前的所有选项

<select name="selectBox" id="selectBox">
  <option value="1">5:00 AM</option>
  <option value="2">5:15 AM</option>
  <option value="3">5:30 AM</option>
  <option value="4">5:45 AM</option>
  ...
  ...
  ...
  <option value="63">8:45 PM</option>
</select>

如何计算从 moment.js 给定本地时间需要删除的值？我可以得到小时（0-23）和分钟（0-59）

Answer 1

打印后无需删除选项。您可以忽略打印无效选项。请参阅下面的代码。

var myDiv = document.getElementById("sel");

var selectList = document.createElement("select");
selectList.id = "mySelect";
myDiv.appendChild(selectList);

var date = new Date("", "", "", 5, 0, 0) // our start time
var cur = new Date() // gets current date
var curhr = cur.getHours() // get current hours 
var curmin = cur.getMinutes() // get current minutes 
var curTime = new Date("", "", "", curhr, curmin, 0) // creates new time 
var hours = Math.abs(curTime - date) / 36e5; // finds the difference
var printFrom = Math.abs(hours / .25) // converts it into a value b/w 0-63

var min = 45;
var hr = 4;
var end = " AM"; // for printing AM and PM
for (var i = 0; i < 64; i++) {
  min += 15;
  if (min % 60 == 0) {
    min = 00;
    hr++;
  }
  // setAttribute("disabled", "true")

  // prints valid option
  var option = document.createElement("option");
  if (i <= parseInt(printFrom)) {
    option.setAttribute("disabled", "true");
  }
  option.value = i;
  if (hr == 12) {
    end = " PM";
  }

  if (min % 60 == 0) {
    option.text = hr.toString() + ":00" + end;
  } else {
    option.text = hr.toString() + ":" + min.toString() + end;
  }
  selectList.appendChild(option);
}

<div id="sel"></div>

注意：我已更新我的答案以禁用无效选项。如果不需要，可以去掉else部分i > parseInt(printFrom)。

Answer 2

您可以定义两个函数：一个将序列号 (1 - 64) 转换为时间字符串，另一个返回与当前时间对应的序列号。

然后使用它们在页面加载时首先填充完整的列表框（也许您不需要这个？），然后通过删除已通过的条目来保持更新：

function quarterToTime(i) {
    i--; // Make relative to zero
    return ('0' + (((Math.floor(i / 4) + 4) % 12) + 1)).substr(-2) + ':' 
           + ('0' + ((i * 15) % 60)).substr(-2) 
           + (i >= 28 ? ' PM' : ' AM');
}

function nextQuarter() {
    var dt = new Date();
    return (dt.getHours()-5)*4 + Math.ceil(dt.getMinutes() / 15) + 1;
}

// Fill complete list upon page load
for (var i = 1; i <= 64; i++) {
    $("#selectBox").append($("<option>", { value: i }).text(quarterToTime(i)));
}

// Keep list updated
setInterval(function () {
    var quarter = nextQuarter();
    $("#selectBox > option").filter(function () {
        return +this.value < quarter;
    }).remove();
}, 1000); // Every second. Could be every minute.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox"></select> (Adapts after 1 second)