Question

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

Answer 1

编辑： Live demo

这个怎么样：

<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部分工作。

一些警告：

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

Answer 2

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

e.g。

<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个条目选择的合理期间，那么您需要等到他们选择年份和月份之前你可以投入日子。至少以上为您提供了验证日期的简单算法。

日期，月份和年份下拉框

2 个答案: