jquery - 过期后从选择选项中删除日期

Question

我有一个基本的选择字段表单，用户可以为他们想要更多信息的课程选择日期。这些日期是手动添加的，不会从数据库等中填充。

选择后，我有一个脚本，它动态地使用这个选定的日期来填充 cf7 查询表格，这样我就知道课程名称和感兴趣的课程日期。

我想弄清楚的是如何删除已过期的选择字段中的日期并每天更新以确保不出现旧的课程日期。

提前谢谢了。

if (jQuery(".booking-date select").length) {
  var options = jQuery(".booking-date select > option").clone();
  jQuery('select.wpcf7-select[name="coursedates"]').empty().append(options);
  // Add on change Function
  jQuery('.booking-date select').on('change', function() {
    var val = jQuery(this).prop('selectedIndex');
    jQuery('select.wpcf7-select[name="coursedates"]').prop('selectedIndex', val);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Course Dates: </strong>
<div class="booking-date">
  <select class="coursedates">
    <option>17 December - 20 December 2019</option>
    <option>13 July - 17 July 2020</option>
    <option>14 December - 18 December 2020</option>
  </select>
</div>

标签： jqueryforms

Answer 1

为您的选项分配一个包含标准日期格式的值将允许您轻松比较 Date 对象。

$('.coursedates option').each(function() {
  var courseEndDate = new Date($(this).val());
  var dateNow = new Date();
  
  if (dateNow > courseEndDate) {
    $(this).remove();
    console.log('Removing ' + $(this).text() + '. Course has ended.');
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="coursedates">
  <option value="2019-12-20">17 December - 20 December 2019</option>
  <option value="2020-07-17">13 July - 17 July 2020</option>
  <option value="2020-12-18">14 December - 18 December 2020</option>
</select>