Stupid Form Tricks
Dates and Calendars -
Validating and Formatting Dates

for most browsers

Nobody likes a nag. Not even when the nag is an HTML form. Most date validation scripts check character by character to see that the user has entered the date in the correct format. When it finds a problem, the nagging script alerts you to the problem and demands you fix it. This goes on and on until no problems are left. Well, I say the hell with that.

Enter a Date (MM/DD/YY) :

<form>
Enter a Date (MM/DD/YY) : <input type="text" name="DATE1" size="10">
<input type="button" value="Test" onclick="checkDateFormat(this.form.DATE1,3)">
</form>

This script assumes the user is going to mess up. As long as you enter the correct number of digits and put them in the correct order, the script will check that the date is a valid using
function checkDateFormat(input1,formatNumber),
and if it is, it will put it in the correct format using
function dateFormats(month,day,year,formatNumber).

formatNumber corresponds to the formats defined in function dateFormats().
0 = mmddyy
1 = mmddyyyy
2 = mm/dd/yyyy
3 = mm/dd/yy
4 = yyyymm
5 = ddmmyy
6 = dd/mm/yy
7 = ddmmyyyy
8 = dd/mm/yyyy

If you need a different date format, YYYY-MM-DD for instance, feel free to modify the scripts to meet your needs. Just don't ask me to do it.

 

Validating and Comparing 2 Dates

function checkDateFormat() can take another text input as a 3rd argument - checkDateFormat(input1,formatNumber,input2)

When a second input is passed the function validates both date formats and checks that the first date is at least one day before the second.

Start Date: DD/MM/YY
End Date:   DD/MM/YY

<form>
Start Date: <input type="text" name="START_DATE">
<br>
End Date: <input type="text" name="END_DATE"><br>
<input type="button" value="Test" onclick="checkDateFormat(this.form.START_DATE,6,this.form.END_DATE)">
</form>

You can copy the functions out of the textarea below:

var date = new Date(); var curr_dy = date.getDate(); var curr_mn = date.getMonth(); var curr_yr = date.getFullYear(); var DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; function Calendar_get_daysofmonth(monthNo, p_year) { if ((p_year % 4) == 0) { if ((p_year % 100) == 0 && (p_year % 400) != 0) return DOMonth[monthNo]; return lDOMonth[monthNo]; } else return DOMonth[monthNo]; } // -- globals used with calendar and date functions var calField; var calSpan; var calFormat; var calWknd = false; function checkDateFormat(d1,calFormat,d2){ var dArr = new Array(); dArr[0] = d1; if (d2) dArr[1] = d2; var re= /\D/; var error = false; var errorMsg = 'Enter a valid date'; var mn = new Array(); var dy = new Array(); var yr = new Array(); for (i=0; i<dArr.length;i++){ var num=eval(dArr[i]).value; if (num == ''){ error = true; } else{ while (re.test(num)){num = num.replace(re,"");} if (calFormat == 0 || calFormat == 3){ // mmddyy if (num.length != 6) error = true; else { mn[i] = num.substring(0,2); dy[i] = num.substring(2,4); yr[i] = num.substring(4,6);} } if (calFormat == 1 || calFormat == 2){ // mmddyyyy if (num.length != 8) error = true; else { mn[i] = num.substring(0,2); dy[i] = num.substring(2,4); yr[i] = num.substring(4,8);} } if (calFormat == 4){ // yyyymm if (num.length != 6) error = true; else { mn[i] = num.substring(4,6); dy[i] = 0; yr[i] = num.substring(4,8);} } if (calFormat == 5 || calFormat == 6 ){ // ddmmyy if (num.length != 6) error = true; else { dy[i] = num.substring(0,2); mn[i] = num.substring(2,4); yr[i] = num.substring(4,6);} } if (calFormat == 7 || calFormat == 8){ // ddmmyyyy if (num.length != 8) error = true; else { dy[i] = num.substring(0,2); mn[i] = num.substring(2,4); yr[i] = num.substring(4,8);} } if (parseFloat(mn[i]) > 12 || parseFloat(mn[i]) < 1) error = true; else { if (parseFloat(dy[i]) > Calendar_get_daysofmonth(parseFloat(mn[i])-1, parseFloat(yr[i])) || parseFloat(dy[i]) < 1) error = true; } } if (error){alert(errorMsg); eval(dArr[i]).select(); return false;} else { eval(dArr[i]).value=dateFormats(parseFloat(mn[i])-1,dy[i],yr[i],calFormat); } } if (d2){ for (x=0;x<2;x++){ if (yr[x].length == 2 && parseFloat(yr[x]) > 50) yr[x] = 19+yr[x]; if (yr[x].length == 2 && parseFloat(yr[x]) < 50) yr[x] = 20+yr[x]; } var date1 =new Date(yr[0], parseFloat(mn[0])-1, dy[0]); var date2 =new Date(yr[1], parseFloat(mn[1])-1, dy[1]); var one_day=1000*60*60*24 var diff = Math.ceil(((date2.getTime()) - date1.getTime())/(one_day)); if (diff < 1) {alert('The first date must be before the second date'); d1.select(); return false; } } } function dateFormats(m,d,y,calFormat){ d = d.toString(); m = m+1; m = m.toString(); y = y.toString(); var sy = y; // -- convert to 2 digit numbers if (m.length == 1){m = '0'+ m;} if (d.length == 1){d = '0'+ d;} if (y.length == 4) sy = y.substring(2,4); var format; switch (calFormat){ case 0 : format = m + d + sy; break; // mmddyy case 1 : format = m + d + y; break; // mmddyyyy case 2 : format = m +'/'+ d +'/'+ y; break; // mm/dd/yyyy case 3 : format = m +'/'+ d +'/'+ sy; break; // mm/dd/yy case 4 : format = y + m; break; // yyyymm case 5 : format = d + m + sy; break; // ddmmyy case 6 : format = d +'/'+ m +'/'+ sy; break; // dd/mm/yy case 7 : format = d + m + y; break; // ddmmyyyy case 8 : format = d +'/'+ m +'/'+ y; break; // dd/mm/yyyy default: format = m + d + y; break; // mmddyyyy } return format; }

---

PXL8 2004