日期,月份和年份下拉框

时间:2012-06-23 10:47:00

标签: php javascript html

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

2 个答案:

答案 0 :(得分:4)

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

一些警告:

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

答案 1 :(得分:1)

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

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