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

Question

我有一个包含时间值的“From”和“To”下拉列表。 它看起来像这样：

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>

我想阻止人们能够“从”选择等于或晚于“到”，例如，从上午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:00pm 之后的所有内容

是什么赋予了？ 在 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
  });
});