JavaScript - 确保日期有效

Question

我有 3 个下拉框来显示开始日期（日/月/年）。我还有 3 个要显示结束日期。

我想验证一下

• 用户选择了一个有效的日期（即不是 2 月 30 日）。如果他们选择了无效的日期，则 alert("Your date is invalid.")
• 开始日期和结束日期之间的天数差小于 7。

我真的很挣扎，希望有人可以帮助我作为一个相对初学者。

到目前为止我的代码如下：

<script type="text/javascript">
    var monthtext=["01","02","03","04","05","06","07","08","09","10","11","12"];

    function populatedropdown(dayfield, monthfield, yearfield){
    var today=new Date()
    var dayfield=document.getElementById(dayfield)
    var monthfield=document.getElementById(monthfield)
    var yearfield=document.getElementById(yearfield)
    for (var i=0; i<=31; i++)
       dayfield.options[i]=new Option(i, i)
    dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(),     true, true) //select today's day
    for (var m=0; m<12; m++)
      monthfield.options[m]=new Option(monthtext[m], monthtext[m])
    monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
    var thisyear=today.getFullYear()
    for (var y=0; y<4; y++){
      yearfield.options[y]=new Option(thisyear, thisyear)
      thisyear+=1
    }
    yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
    }
</script>

HTML：

        <label>Start date :</label>
            <select name="startDateDay" id="startDaydropdown"></select> 
            <select name="startDateMonth" id="startMonthdropdown"></select> 
            <select name="startDateYear" id="startYeardropdown"></select>

        <label>End date :</label>
            <select name="endDateDay" id="endDaydropdown"></select> 
            <select name="endDateMonth" id="endMonthdropdown"></select> 
            <select name="endDateYear" id="endYeardropdown"></select>

Answer 1

为什么不只用两个文本字段让用户输入日期，然后让new Date(textfield.value) 完成日期验证的繁重工作？

那么您只需要确定日期是否在彼此之间的 7 天内。您可以使用Date object 轻松完成该部分，或许只需以下简单的操作：

var dateDiff = date2.getTime()  - date1.getTime();
if(dateDiff <= 1000*60*60*24*7 && dateDiff > 0) {
    return 'valid';
} else {
    return 'invalid';
}

如果将此作为提交按钮的一部分运行，您的代码将类似于：

function validateDatesOnSubmit() {
    var date1 = new Date(document.getElementById('startDate').value);
    var date2 = new Date(document.getElementById('endDate').value);
    if(date1 == "Invalid Date" || date2 == "Invalid Date") {
        alert("You have entered an invalid date, please fix this.");
        return false;
    }
    var dateDiff = date2.getTime() - date1.getTime();
    if(dateDiff <= 1000*60*60*24*7 && dateDiff >= 0) {
        return true;
    } else {
        alert("You have entered a range beyond one week, please reduce the number of days selected.");
        return false;
    }
}
document.getElementById('myForm').onsubmit = validateDatesOnSubmit;

Answer 2

假设日期格式为dd-mm-yyyy 或dd/mm/yyyy 那么：

function toDate(t) {
  var t = t.split(/[-\/]/g);
  return new Date(t[2],t[1] - 1, t[0]);
}

function within7Days(t0, t1) {
  var d0 = toDate(t0);
  var d1 = toDate(t1);
  return d0.setDate(d0.getDate() + 7) > d1;
}

alert(within7Days('12-3/2012', '18/3/2012')); // true
alert(within7Days('12-3/2012', '19/3/2012')); // false

如果日期可以在之前或之后，您可能需要使用Math.abs()

编辑

顺便说一句，不要信任Date.parse。在 ECMA-262 ed 3 中，它本质上是依赖于实现的。在 ES5 中，它被指定为首先尝试将字符串解析为 ISO8601，但之后，它与实现无关。 IE（至少

无论如何，手动解析日期是微不足道的。