javascript - 验证 html 下拉列表中的日期

标签 javascript html validation date

我有三个 HTML 下拉列表来选择年、月和日期。如果所选年份等于当前年份,第二个和第三个列表仅显示截至当前日期的月份和日期。 我想用 JavaScript 编写这个代码。 这里我面临的问题是,当用户首先选择日期或月份时它将如何执行?

最佳答案

示例如下。如果首先选择月份和日期,除非所选值不再有效,否则它们不会更改。如果它们无效,它们将重置为 1。

HTML

<body>
  <select name="month" id="month"></select>
  <select name="day" id="day"></select>
  <select name="year" id="year"></select>
</body>

JavaScript(带 JQuery)

<script type ="text/javascript" src="http://code.jQuery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  var year = new Date().getFullYear();
  // load years
  for (var i=2000; i<=year; i++) $("#year").append('<option value=' + i + '>' + i + '</option>');
  // load months
  for (var i=1; i<=12; i++) $("#month").append('<option value=' + i + '>' + i + '</option>');
  // load days
  for (var i=1; i<=31; i++) $("#day").append('<option value=' + i + '>' + i + '</option>');
});

$(function() {
  $('#year').change(function() {
    var now = new Date();
    if ($('#year').val()==now.getFullYear()) {
      $('#month option').each(function() {
        if ($(this).val()>(now.getMonth()+1)) $(this).remove();
      });
    } else {
      for (var i=1; i<13; i++)
        if ($("#month option[value='" + i + "']").val()==undefined)
          $("#month").append('<option value=' + i + '>' + i + '</option>');
    }

    checkMonth();
  });

  $('#month').change(checkMonth);
});

function checkMonth() {
  var now = new Date();
  if ($('#year').val()==now.getFullYear() && $('#month').val()==(now.getMonth()+1)) {
    $('#day option').each(function() {
      if ($(this).val()>now.getDate()) $(this).remove();
    });
  } else {
    var days = 31;
    var month = $('#month').val();
    if (month==2) {
      if (($('#year').val() % 4) == 0) days = 29; // leap year
      else days = 28;
    } else if (month==2 || month==4 || month==6 || month==9 || month==11) {
      days = 30;
    }
    for (var i=1; i<32; i++)
      if (i>days)
        $("#day option[value='" + i + "']").remove();
      else if ($("#day option[value='" + i + "']").val()==undefined)
        $("#day").append('<option value=' + i + '>' + i + '</option>');
  }
}
</script>

关于javascript - 验证 html 下拉列表中的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30183198/

相关文章:

javascript - AngularJS 使因变量静态

html - 无法使用边距自动将内容居中

javascript - 使用 Canvas 绘制圆形图像导致结果略有不同

asp.net - 如何将 Jquery 函数绑定(bind)到 asp.net 按钮并仍然允许验证和回发?

javascript - Jquery 使用未定义的验证器

javascript - 使用 Puppeteer 将结果抓取到 JSON 时重启无限

javascript - 如何使用javascript中不同数组集中的键映射数组对象

javascript - 定义指令时 'controller' 、 'link' 和 'compile' 函数之间的区别

html - 在 CSS 中将表格的边框宽度设置得更窄?

html - 允许列表内的​​ div 吗?