javascript - 如何使用 JS/jQuery 验证两个下拉字段中的时间值？

Question

我有一个带有“从”和“到”下拉列表的表单，其中包含时间值。 它看起来像这样:

From
<select class="from">
<option value="09:00 AM">09:00 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:15 AM">10:15 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:45 AM">10:45 AM</option>
<option value="11:00 AM">11:00 AM</option>
...
</select>

To
<select class="to">
<option value="10:00 AM">10:00 AM</option>
<option value="10:15 AM">10:15 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:45 AM">10:45 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:15 AM">11:15 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="11:45 AM">11:45 AM</option>
<option value="12:00 PM">12:00 PM</option>
...
</select>

我想阻止人们选择等于或晚于“to”的“from”，例如上午 11 点到上午 9 点以及其他没有意义的组合。

我正在使用Datejs和 jQuery。 我包含了 date.min.js 脚本，并得到了以下几乎可以解决问题的代码:

$('.from').on('change', function(e) {
  var from_time = Date.parse($(this).val());

  // Ensure 1 hour difference
  var from_time_adj = new Date();
  from_time_adj.setTime(from_time.getTime() + (60 * 60 * 1000));

  $('.to option').each(function(index, el) {
    var to_time = Date.parse($(el).val());
    if (to_time < from_time_adj) {
      $(el).attr('disabled', true);
    }
  });
});


$('.to').on('change', function(e) {
  var to_time = Date.parse($(this).val());

  // Ensure 1 hour difference
  var to_time_adj = new Date();
  to_time_adj.setTime(to_time.getTime() - (60 * 60 * 1000));

  $('.from option').each(function(index, el) {
    var from_time = Date.parse($(el).val());
    if (from_time > to_time_adj) {
      $(el).attr('disabled', true);
    }
  });
});

这是整个“几乎可以工作”的事情:JSFiddle

在某些时候它会变得很奇怪，例如:

第 1 步:设置上午 11:00 - 可以

第 2 步:设置为下午 2:00 - 可以

第 3 步:设置为晚上 8:00 - 糟糕!此时 from 已禁用下午 1:00 之后的所有内容

什么给了？经过大约 2 次更改后，它开始做这种奇怪的事情。进一步尝试使用 from/to 值表明了这一点。

我意识到代码逻辑中有错误，但我找不到它。

Answer 1

您还需要启用:

JSFIDDLE

$('.from').on('change', function(e) {
  var from_time = Date.parse($(this).val());

  var from_time_adj = new Date();
  from_time_adj.setTime(from_time.getTime() + (60 * 60 * 1000));

  $('.to option').each(function(index, el) {
    var to_time = Date.parse($(el).val());
    $(el).attr('disabled', to_time < from_time_adj); // disables when statement is true, enables when false
  });
});

$('.to').on('change', function(e) {

  var to_time = Date.parse($(this).val());
  var to_time_adj = new Date();

  to_time_adj.setTime(to_time.getTime() - (60 * 60 * 1000));
  $('.from option').each(function(index, el) {
    var from_time = Date.parse($(el).val());
    $(el).attr('disabled', to_time > to_time_adj); // disables when statement is true, enables when false
  });
});