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

Question

我正在寻找一个解决方案，实际上我在预约表格中使用日期字段但是对于“时间字段”我根据客户要求“24小时时钟”使用两个下拉列表，一个下拉列表是“小时前：10,11,12， 13 ......直到19，“和另一个”分钟：ex：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>

Answer 2

到了日期和时间，我总是和moment.js一起去。为了你所需要的，moment.js有一些有用的东西叫做difference，可以测量年，月，周，日，小时，分钟和秒的差异。在您的情况下，您需要将用户选择的日期/时间传递给方法，请看以下示例：

var userTime = "14:52";
var stt = new Date("Mar 02, 2018 " + userTime);
stt = stt.getTime();

var a = moment(stt);

if (a.diff()<0){
  alert("Time is passed already!")
}else {
  alert("You still have time!")
}

基本上，diff（）将返回一个整数，它是给定日期/时间与当前时间之间的差异。所以如果结果是否定的，那就意味着它已经过去了！

http://jsfiddle.net/rLjQx/15783/