Question

我有一些时间实例在选择选项中。如果他想在上午10点使用该系统，我希望用户在早上6点之前给出他的规格，即应该有4小时的间隙。所以在早上6点之后，上午10点的选项应该被禁用，早上6点30分之后，上午10点和上午10点30分的选项应该被禁用等等。这是我的代码 -

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

</head>
<input type="date" name="Date" id = "put_date" required>
<select name="Time" id = "time">
<option value="Select Time" id = time>Select Time</option>
<option value="10.00.00" id = t1> 10.00.00</option>
<option value="10.30.00" id = t2>10.30.00</option>

</select>
<script>
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var dd = today.getDate();
var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
} 

if(mm<10) {
mm = '0'+mm
} 

var today_date = dd + '-' + mm + '-' + yyyy;
if((document.getElementById("put_date") == today_date) && (h==5) && (m==59) 
&& (s==59))
{
document.getElementById("t1").disabled = true;
}
</script>
</div>
</html>

运行程序时没有语法错误或任何其他类型的错误。但我没有得到所需的输出。

请有人指导我，我错了。

谢谢！

Answer 1

＆＃13;

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var dd = today.getDate();
var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
var strNow=h + m/100;
$("#time").children().each(function() {
    var strOpt=parseFloat($(this).attr("value").split(".")[0]) + parseFloat($(this).attr("value").split(".")[1])/100;
    if (strNow+4 > strOpt) {
        $(this).prop("disabled", "true");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" name="Date" id="put_date" required/>
<select name="Time" id="time">
<option value="Select Time">Select Time</option>
<option value="10.00.00" disabled>10.00.00</option>
<option value="10.30.00">10.30.00</option>
<option value="11.00.00">11.00.00</option>
<option value="11.30.00">11.30.00</option>
<option value="12.00.00">12.00.00</option>
<option value="12.30.00">12.30.00</option>
<option value="13.00.00">13.00.00</option>
<option value="13.30.00">13.30.00</option>
<option value="14.00.00">14.00.00</option>
<option value="14.30.00">14.30.00</option>
<option value="15.00.00">15.00.00</option>
<option value="15.30.00">15.30.00</option>
<option value="16.00.00">16.00.00</option>
<option value="16.30.00">16.30.00</option>
<option value="17.00.00">17.00.00</option>
<option value="17.30.00">17.30.00</option>
<option value="18.00.00">18.00.00</option>
<option value="18.30.00">18.30.00</option>
<option value="19.00.00">19.00.00</option>
<option value="19.30.00">19.30.00</option>
<option value="20.00.00">20.00.00</option>
<option value="20.30.00">20.30.00</option>
<option value="21.00.00">21.00.00</option>
<option value="21.30.00">21.30.00</option>
</select>

＆＃13;

Answer 2

我回过头来说明如何比较日期的实际时间成分。为此，我生成了一个选择选项列表，其中时间分量为值，每半小时一个。然后我设置一个计时器来改变选择列表，根据当前用户浏览器，一旦经过一段时间就禁用选项。从技术上讲，您可能希望使用服务器日期/时间作为起点，而不是浏览器，因为用户可以简单地将当地时间重置为＆＃34;作弊＆＃34;这个，但我们现在将忽略它。

鉴于此，该解决方案与该问题不完全匹配，它使用更常规的时间显示HH：MM，例如10:30 AM（用户的本地时间）。有了大量的可用选项（48）以及用户在选择列表开始时禁用了数字的可能情况，至少对我来说，尝试在UI中减少该列表是有意义的，所以我只是尝试隐藏使用CSS禁用的选项。其他选项，例如从列表中删除可能会更好。我还在更改事件上添加了日期验证，但这并不是严格要求，而是说明了更多的＆＃34;解决方案＆＃34;。

插图示例：

要检查的计时器以及是否超过30分钟的时间边界，请禁用相应的选项。我每隔一秒检查一下，但你可以将计时器设置为仅在时间边界检查它。我还执行了30分钟边界的倒计时。
日期验证 - 检查它是否为日期。也许还会迫使用户进入未来＆＃34; date - 因为在这个用例中，昨天或上周的请求似乎也是无效的。
在每次倒计时到期时添加了一个时间为up（timeup）的自定义事件。由于我们有这个，我们可以在初始启动时使用sel.dispatchEvent(timesup);

＆＃13;

// create a timer to use on each 30 minute time elapse (from here: https://stackoverflow.com/a/20618517/125981 )
function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}
CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
    that = this,
    diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};
CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};
CountDownTimer.prototype.expired = function() {
  return !this.running;
};
CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};
// dynamically add the select values
function generateSelects(step, element) {
  var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
  // empty out the select options
  while (element.firstChild) {
    element.firstChild.remove();
  }
  var firstoption = document.createElement("option");
  firstoption.innerText = "Select Time";
  firstoption.value = "Select Time";
  element.appendChild(firstoption);

  while (dt.getDate() == 1) {
    let point = dt.toLocaleTimeString('en-US');
    let pointValue = dt.getTime();

    let item = document.createElement("option");
    item.value = pointValue;
    item.innerText = point;
    element.appendChild(item);
    // increment for next step
    dt.setMinutes(dt.getMinutes() + step);
  }
}

window.onload = function() {
  generateSelects(checkperiod, document.getElementById("timeselect"));
  sel.dispatchEvent(timesup);
  //console.clear();
  // var minutes = checkperiod;
  // var seconds = minutes * 60;
  //var desiredBoundryMintues = checkperiod;
  var mytimer = startTimer(details);
};

function secondsToNext(intervalminutes) {
  var current = new Date();
  var min = current.getMinutes();
  min = min > intervalminutes ? min - intervalminutes : min;
  // min to next interval
  min = (60 - (min + intervalminutes));
  // seconds to next interval
  var seconds = min * 60;
  // minutes to next (in seconds) less current seconds in the minute get total seconds to next interval
  seconds = seconds + (60 - current.getSeconds());
  return seconds;
}

function startTimer(p) {
  //console.log(p);
  var display = document.querySelector('#timerdisplay');
  var s = secondsToNext(p.detail.period);
  var timer = new CountDownTimer(s);
  // to test: var timer = new CountDownTimer(6);
  timer.onTick(format).onTick(restart).start();

  //allows us to restart time at defined (30) interval minute mark
  function restart() {
    if (this.expired()) {
      mydate.dispatchEvent(timesup);
      this.duration = (p.detail.period * 60) - 1;
      this.duration = secondsToNext(p.detail.period);
      setTimeout(function() {
        timer.start();
      }, 1000);
    }
  }

  function format(minutes, seconds) {
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    // show progress on each tick
    display.textContent = minutes + ':' + seconds;
  }

};
// check if is valid date
// credit here: https://stackoverflow.com/a/1353711/125981
function isDate(d) {
  if (Object.prototype.toString.call(d) === "[object Date]") {
    // it is a date
    if (isNaN(d.getTime())) { // d.valueOf() could also work
      // date is not valid
      return false;
    } else {
      // date is valid
      return true;
    }
  } else {
    // not a date
    return false;
  }
}
// parse a date in mm/dd/yyyy format
function parseDate(input) {
  // assume / or - for delimiters
  var parts = input.indexOf("/") !== -1 ? input.split('/') : input.split('-');
  return new Date(parts[2], parts[0] - 1, parts[1]); // Note: months are 0-based
}
function checkSelectOptions(e) {
  //console.dir(e);
  var today = new Date();
  var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
  dt.setHours(today.getHours() + e.detail.hour);
  var nowtime = dt.getTime();
  var myOpts = e.target.getElementsByTagName("option");
  for (var i = 0; i < myOpts.length; i++) {
    myOpts[i].disabled = (myOpts[i].value <= nowtime);
  }
}

function checkSelect(e) {
  var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
  dt.setTime(e.target.value);
  document.getElementById("showtime").innerHTML = dt.toLocaleTimeString('en-US');
}

function checkDate(e) {
  var d = parseDate(e.target.value);
  var isValidDate = isDate(d);
  document.getElementById("showdate").innerHTML = isValidDate ? d.toLocaleDateString('en-US') : "Invalid Date entered";
}

// horrid global variables
var checkperiod = 30; //minute boundary
var boundaryHour = 4;

// create event
//var timesup = new Event('timesup');
var details = {detail:{"period":checkperiod,"hour":boundaryHour }};
var timesup = new CustomEvent('timesup',  details);
///var timesup = document.createEvent('Event');
// Define event named 'timesup'.
///timesup.initEvent('timesup', true, true);

var mydate = document.getElementById("put_date");
mydate.addEventListener('change', checkDate);

var sel = document.getElementById("timeselect");
sel.addEventListener('change', checkSelect, false);
sel.addEventListener('timesup', checkSelectOptions, false);

＆＃13;

option:disabled {
  display: none;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div>
  <input type="date" name="Date" id="put_date" required>
  <select name="timeselect" id="timeselect">
    <option value="Select Time">Select Time</option>
</select>
  <div>Next selection window closes in <span id="timerdisplay"></span> minutes!</div>
  <div>You chose: <span id="showtime">no time yet</span></div>
  <div>You chose Date: <span id="showdate">no date yet</span></div>

＆＃13;

Answer 3

jQuery的方法是

$("#t1").prop("disabled", true);

根据条件禁用选择选项

3 个答案: