JavaScript - 确保日期有效

Question

I have 3 drop down boxes to show a start date (day/month/year). I have 3 more to show an end date.

I wish to validate that

• The user picks a valid date (ie not the 30th February). If they pick an invalid date, alert("Your date is invalid.")
• That the difference in days between the start and end dates is less than 7.

I am really struggling with this and was hoping someone could help me as a relative beginner.

My code so far is as follows :

<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

Why not just have two text fields to let the user type in the date, then let new Date(textfield.value) do the heavy lifting of date validation?

Then you only need to worry about determining that the dates are within 7 days of each other. You can do that part fairly easily with the Date object , perhaps with something as simple as:

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

If running this as part of the submit button, your code would be something like:

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

Assuming date is in the format dd-mm-yyyy or dd/mm/yyyy then:

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

If the date can be before or after, you might want to use Math.abs()

Edit

Incidentally, do not trust Date.parse . In ECMA-262 ed 3 it is essentially implementation dependent. In ES5 it is specified as first attempting to parse the string as ISO8601, but after that, it is implementation idependant. IE (<9 at least) will not correctly parse an ISO8601 date string.

In any case, manually parsing a date is trivial.