javascript - 如果所选数字小于时钟中的当前时间，如何禁用数字

Question

我正在寻找一种解决方案，实际上我在约会表单中使用日期字段，但对于“时间字段”，我根据客户要求“24 小时制”使用了两个下拉列表，一个下拉列表用于“小时数:10,11 ,12,13.. 一直到 19”，另一个是“分钟:例如:15,30,45,60”。因此，由于每当用户选择“日期”时都会出现下拉菜单，并且在该特定日期，他/她必须选择预约时间。例如:日期“02/03/2018”，时间是小时:“10”，分钟:“30”，但当前时间是小时:“11”，分钟:“30”。但它仍然会转到下一页，它应该说“时间已经过去”我想使用这种功能。认为使用“禁用属性”的 javascript 是可能的，因此数字大于或小于功能。谁能帮我解决这个问题

<div class="col-xs-12 col-sm-6">
        <div class="select-container">
            <select class="form-control sel-event" id="hr" name="hours" required>
                <option value="">Choose Time/Hr</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
            </select>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="select-container">
            <select class="form-control sel-event" id="min" name="minutes" required>
                <option value="">Choose Time/Min</option>
                <option value="00">00 Min</option>
                <option value="15">15 Min</option>
                <option value="30">30 Min</option>
                <option value="45">45 Min</option>
            </select>
        </div>
    </div>

function myFunction() {

 var appointment_time =document.getElementById("hr").value

    var dt = new Date();
    var current_time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

    //convert both time into timestamp
    var stt = new Date("Mar 02, 2018 " + appointment_time);
    stt = stt.getTime();

    var endt = new Date("Mar 02, 2018 " + current_time);
    endt = endt.getTime();

    //by this you can see time stamp value in console via firebug
    console.log("Time1: "+ stt + " Time2: " + endt);

    if(stt > endt) {
       alert('Submission time can not be less than of current time.');//to do 
    return false;
    }
}

Answer 1

当您标记JQuery 时，您可以使用JQuery each()禁用选项的方法。
这将不允许用户选择小于当前小时和分钟的任何 Hour 或 Min。

var hour = new Date().getHours();
var min = new Date().getMinutes();

$("#hr option").each(function() {

  if (hour > $(this).val())
    $(this).prop("disabled", true);

});

$("#min option").each(function() {

  if (min > $(this).val())
    $(this).prop("disabled", true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="col-xs-12 col-sm-6">
  <div class="select-container">
    <select class="form-control sel-event" id="hr" name="hours" required>
                <option value="">Choose Time/Hr</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
            </select>
  </div>
</div>
<div class="col-xs-12 col-sm-6">
  <div class="select-container">
    <select class="form-control sel-event" id="min" name="minutes" required>
                <option value="">Choose Time/Min</option>
                <option value="00">00 Min</option>
                <option value="15">15 Min</option>
                <option value="30">30 Min</option>
                <option value="45">45 Min</option>
            </select>
  </div>
</div>