JavaScript - проверка правильности даты

Question

У меня есть 3 выпадающих списка, чтобы показать дату начала (день / месяц / год). У меня есть еще 3, чтобы показать дату окончания.

Я хочу подтвердить это

• Пользователь выбирает действительную дату (т. Е. Не 30 февраля). Если они выберут недопустимую дату, предупредите («Ваша дата недействительна».)
• что разница в днях между начальной и конечной датами меньше 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

Предполагая, что дата имеет формат 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 (по крайней мере <9) не будет правильно анализировать строку даты ISO8601. </p>

В любом случае, анализ даты вручную тривиален.

Answer 2

Почему бы просто не иметь два текстовых поля, чтобы пользователь мог вводить дату, а затем позволить new Date(textfield.value) выполнить сложную проверку даты?

Тогда вам нужно только позаботиться о том, чтобы даты были в пределах 7 дней друг от друга. Вы можете довольно легко выполнить эту часть с помощью объекта Date , возможно, с помощью чего-то простого:

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;