日期、月份和年份下拉框

Date, Month and year Dropdown boxes

本文关键字：日期      更新时间：2023-09-26

我正在创建一个注册，我需要在其中获取用户的出生日期，我的问题是，如何在 html 中创建月、年和日的下拉框，然后将这些日子处理成 php 脚本，将其插入数据库？月、年和日应该在哪里有某个月份的有效日期？

编辑：现场演示

这个怎么样：

<select name="year"></select>
<select name="month">
    <option value="1">January</option>
    ...
</select>
<select name="day"></select>

和JS部分：

var ysel = document.getElementsByName("year")[0],
    msel = document.getElementsByName("month")[0],
    dsel = document.getElementsByName("day")[0];
for (var i = 2000; i >= 1950; i--) {
    var opt = new Option();
    opt.value = opt.text = i;
    ysel.add(opt);
}
ysel.addEventListener("change", validate_date);
msel.addEventListener("change", validate_date);
function validate_date() {
    var y = +ysel.value, m = msel.value, d = dsel.value;
    if (m === "2")
        var mlength = 28 + (!(y & 3) && ((y % 100)!==0 || !(y & 15)));
    else var mlength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m - 1];
    dsel.length = 0;
    for (var i = 1; i <= mlength; i++) {
        var opt = new Option();
        opt.value = opt.text = i;
        if (i == d) opt.selected = true;
        dsel.add(opt);
    }
}
validate_date();

我会让你在PHP部分工作。

一些注意事项：

  1. 我用了addEventListener.请记住，IE<9 改用attachEvent。您可以使用 onchange 属性（已弃用）或依赖一些 JS 框架（如 jQuery）来完成这项工作：$(msel).change(validate_date); 。
  2. 在旧版本的 Firefox 中，<select>元素的add方法是愚蠢的，需要第二个null参数。
  3. 当脚本计算 2 月份的mlength时，它会添加一个布尔值（闰年的简单检查），该布尔值被强制转换为 0 或 1，转换为 28。这在 ECMAScript 5 严格模式下引发异常。

只需给他们一个纯文本输入。如果您不相信人们通过键入来正确输入他们的生日，为什么使用选择元素会有什么不同？只需告诉他们您期望的格式即可。

例如

<script>
function validateDate(v) {
  var bits = v.split('/');
  var d = new Date(bits[2], --bits[1], bits[0]);
  return d.getFullYear() == bits[2] && d.getMonth() == bits[1];
}
function validateForm(form) {
  if (!validateDate(form.birthday.value)) {
    alert('Birthday date is not a valid date');
    return false;
  }
}
</script>
<form onsubmit="return validateForm(this);" action="">
  <div>Birthday (day/month/year): <input type="text" name="birthday"> 
    <input type="submit">
  </div>
</form>

您可以包含一个脚本版本，将纯输入替换为选择，但为了覆盖合理的时间段，您将在年份选择中大约有 100 个条目，然后您需要等到他们同时选择年份和月份，然后才能输入日期。至少上面为您提供了验证日期的简单算法。

相关文章：