Начало
Формы
Дата формата
Автоматически области даты форматов как пользователь входят в информацию. Также утверждает дату, когда полная дата была введена. Взаимный совместимый браузер, включая Netscape 6 +
Enter 1st. Date - mm/dd/yyyy Format
Enter 2nd. Date - yyyy/mm/dd Format
Enter 3rd. Date - dd/mm/yyyy Format
Automatic Formatting For Date Fields
Navigator 4.x versions
Formatting will happen when all 8 numbers are entered.
Navigator 6.x versions
Formatting will happen as you enter the numbers.
IE versions
Formatting will happen as you enter the numbers.
Date Validation Will Occur As You Leave Field
JavaScript Forms: Дата формата
<!-- THREE STEPS TO INSTALL FORMAT DATE: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler into the BODY tag 3. Put the last coding into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin // Check browser version var isNav4 = false, isNav5 = false, isIE4 = false var strSeperator = "/"; // If you are using any Java validation on the back side you will want to use the / because // Java date validations do not recognize the dash as a valid date separator. var vDateType = 3; // Global value for type of date format // 1 = mm/dd/yyyy // 2 = yyyy/dd/mm (Unable to do date check at this time) // 3 = dd/mm/yyyy var vYearType = 4; //Set to 2 or 4 for number of digits in the year for Netscape var vYearLength = 2; // Set to 4 if you want to force the user to enter 4 digits for the year before validating. var err = 0; // Set the error code to a default of zero if(navigator.appName == "Netscape") { if (navigator.appVersion < "5") { isNav4 = true; isNav5 = false; } else if (navigator.appVersion > "4") { isNav4 = false; isNav5 = true; } } else { isIE4 = true; } function DateFormat(vDateName, vDateValue, e, dateCheck, dateType) { vDateType = dateType; // vDateName = object name // vDateValue = value in the field being checked // e = event // dateCheck // True = Verify that the vDateValue is a valid date // False = Format values being entered into vDateValue only // vDateType // 1 = mm/dd/yyyy // 2 = yyyy/mm/dd // 3 = dd/mm/yyyy //Enter a tilde sign for the first number and you can check the variable information. if (vDateValue == "~") { alert("AppVersion = "+navigator.appVersion+" \nNav. 4 Version = "+isNav4+" \nNav. 5 Version = "+isNav5+" \nIE Version = "+isIE4+" \nYear Type = "+vYearType+" \nDate Type = "+vDateType+" \nSeparator = "+strSeperator); vDateName.value = ""; vDateName.focus(); return true; } var whichCode = (window.Event) ? e.which : e.keyCode; // Check to see if a seperator is already present. // bypass the date if a seperator is present and the length greater than 8 if (vDateValue.length > 8 && isNav4) { if ((vDateValue.indexOf("-") >= 1) || (vDateValue.indexOf("/") >= 1)) return true; } //Eliminate all the ASCII codes that are not valid var alphaCheck = " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ/-"; if (alphaCheck.indexOf(vDateValue) >= 1) { if (isNav4) { vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } else { vDateName.value = vDateName.value.substr(0, (vDateValue.length-1)); return false; } } if (whichCode == 8) //Ignore the Netscape value for backspace. IE has no value return false; else { //Create numeric string values for 0123456789/ //The codes provided include both keyboard and keypad values var strCheck = '47,48,49,50,51,52,53,54,55,56,57,58,59,95,96,97,98,99,100,101,102,103,104,105'; if (strCheck.indexOf(whichCode) != -1) { if (isNav4) { if (((vDateValue.length < 6 && dateCheck) || (vDateValue.length == 7 && dateCheck)) && (vDateValue.length >=1)) { alert("Invalid Date\nPlease Re-Enter"); vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } if (vDateValue.length == 6 && dateCheck) { var mDay = vDateName.value.substr(2,2); var mMonth = vDateName.value.substr(0,2); var mYear = vDateName.value.substr(4,4) //Turn a two digit year into a 4 digit year if (mYear.length == 2 && vYearType == 4) { var mToday = new Date(); //If the year is greater than 30 years from now use 19, otherwise use 20 var checkYear = mToday.getFullYear() + 30; var mCheckYear = '20' + mYear; if (mCheckYear >= checkYear) mYear = '19' + mYear; else mYear = '20' + mYear; } var vDateValueCheck = mMonth+strSeperator+mDay+strSeperator+mYear; if (!dateValid(vDateValueCheck)) { alert("Invalid Date\nPlease Re-Enter"); vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } return true; } else { // Reformat the date for validation and set date type to a 1 if (vDateValue.length >= 8 && dateCheck) { if (vDateType == 1) // mmddyyyy { var mDay = vDateName.value.substr(2,2); var mMonth = vDateName.value.substr(0,2); var mYear = vDateName.value.substr(4,4) vDateName.value = mMonth+strSeperator+mDay+strSeperator+mYear; } if (vDateType == 2) // yyyymmdd { var mYear = vDateName.value.substr(0,4) var mMonth = vDateName.value.substr(4,2); var mDay = vDateName.value.substr(6,2); vDateName.value = mYear+strSeperator+mMonth+strSeperator+mDay; } if (vDateType == 3) // ddmmyyyy { var mMonth = vDateName.value.substr(2,2); var mDay = vDateName.value.substr(0,2); var mYear = vDateName.value.substr(4,4) vDateName.value = mDay+strSeperator+mMonth+strSeperator+mYear; } //Create a temporary variable for storing the DateType and change //the DateType to a 1 for validation. var vDateTypeTemp = vDateType; vDateType = 1; var vDateValueCheck = mMonth+strSeperator+mDay+strSeperator+mYear; if (!dateValid(vDateValueCheck)) { alert("Invalid Date\nPlease Re-Enter"); vDateType = vDateTypeTemp; vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } vDateType = vDateTypeTemp; return true; } else { if (((vDateValue.length < 8 && dateCheck) || (vDateValue.length == 9 && dateCheck)) && (vDateValue.length >=1)) { alert("Invalid Date\nPlease Re-Enter"); vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } } } } else { // Non isNav Check if (((vDateValue.length < 8 && dateCheck) || (vDateValue.length == 9 && dateCheck)) && (vDateValue.length >=1)) { alert("Invalid Date\nPlease Re-Enter"); vDateName.value = ""; vDateName.focus(); return true; } // Reformat date to format that can be validated. mm/dd/yyyy if (vDateValue.length >= 8 && dateCheck) { // Additional date formats can be entered here and parsed out to // a valid date format that the validation routine will recognize. if (vDateType == 1) // mm/dd/yyyy { var mMonth = vDateName.value.substr(0,2); var mDay = vDateName.value.substr(3,2); var mYear = vDateName.value.substr(6,4) } if (vDateType == 2) // yyyy/mm/dd { var mYear = vDateName.value.substr(0,4) var mMonth = vDateName.value.substr(5,2); var mDay = vDateName.value.substr(8,2); } if (vDateType == 3) // dd/mm/yyyy { var mDay = vDateName.value.substr(0,2); var mMonth = vDateName.value.substr(3,2); var mYear = vDateName.value.substr(6,4) } if (vYearLength == 4) { if (mYear.length < 4) { alert("Invalid Date\nPlease Re-Enter"); vDateName.value = ""; vDateName.focus(); return true; } } // Create temp. variable for storing the current vDateType var vDateTypeTemp = vDateType; // Change vDateType to a 1 for standard date format for validation // Type will be changed back when validation is completed. vDateType = 1; // Store reformatted date to new variable for validation. var vDateValueCheck = mMonth+strSeperator+mDay+strSeperator+mYear; if (mYear.length == 2 && vYearType == 4 && dateCheck) { //Turn a two digit year into a 4 digit year var mToday = new Date(); //If the year is greater than 30 years from now use 19, otherwise use 20 var checkYear = mToday.getFullYear() + 30; var mCheckYear = '20' + mYear; if (mCheckYear >= checkYear) mYear = '19' + mYear; else mYear = '20' + mYear; vDateValueCheck = mMonth+strSeperator+mDay+strSeperator+mYear; // Store the new value back to the field. This function will // not work with date type of 2 since the year is entered first. if (vDateTypeTemp == 1) // mm/dd/yyyy vDateName.value = mMonth+strSeperator+mDay+strSeperator+mYear; if (vDateTypeTemp == 3) // dd/mm/yyyy vDateName.value = mDay+strSeperator+mMonth+strSeperator+mYear; } if (!dateValid(vDateValueCheck)) { alert("Invalid Date\nPlease Re-Enter"); vDateType = vDateTypeTemp; vDateName.value = ""; vDateName.focus(); return true; } vDateType = vDateTypeTemp; return true; } else { if (vDateType == 1) { if (vDateValue.length == 2) { vDateName.value = vDateValue+strSeperator; } if (vDateValue.length == 5) { vDateName.value = vDateValue+strSeperator; } } if (vDateType == 2) { if (vDateValue.length == 4) { vDateName.value = vDateValue+strSeperator; } if (vDateValue.length == 7) { vDateName.value = vDateValue+strSeperator; } } if (vDateType == 3) { if (vDateValue.length == 2) { vDateName.value = vDateValue+strSeperator; } if (vDateValue.length == 5) { vDateName.value = vDateValue+strSeperator; } } return true; } } if (vDateValue.length == 10&& dateCheck) { if (!dateValid(vDateName)) { // Un-comment the next line of code for debugging the dateValid() function error messages //alert(err); alert("Invalid Date\nPlease Re-Enter"); vDateName.focus(); vDateName.select(); } } return false; } else { // If the value is not in the string return the string minus the last // key entered. if (isNav4) { vDateName.value = ""; vDateName.focus(); vDateName.select(); return false; } else { vDateName.value = vDateName.value.substr(0, (vDateValue.length-1)); return false; } } } } function dateValid(objName) { var strDate; var strDateArray; var strDay; var strMonth; var strYear; var intday; var intMonth; var intYear; var booFound = false; var datefield = objName; var strSeparatorArray = new Array("-"," ","/","."); var intElementNr; // var err = 0; var strMonthArray = new Array(12); strMonthArray[0] = "Jan"; strMonthArray[1] = "Feb"; strMonthArray[2] = "Mar"; strMonthArray[3] = "Apr"; strMonthArray[4] = "May"; strMonthArray[5] = "Jun"; strMonthArray[6] = "Jul"; strMonthArray[7] = "Aug"; strMonthArray[8] = "Sep"; strMonthArray[9] = "Oct"; strMonthArray[10] = "Nov"; strMonthArray[11] = "Dec"; //strDate = datefield.value; strDate = objName; if (strDate.length < 1) { return true; } for (intElementNr = 0; intElementNr < strSeparatorArray.length; intElementNr++) { if (strDate.indexOf(strSeparatorArray[intElementNr]) != -1) { strDateArray = strDate.split(strSeparatorArray[intElementNr]); if (strDateArray.length != 3) { err = 1; return false; } else { strDay = strDateArray[0]; strMonth = strDateArray[1]; strYear = strDateArray[2]; } booFound = true; } } if (booFound == false) { if (strDate.length>5) { strDay = strDate.substr(0, 2); strMonth = strDate.substr(2, 2); strYear = strDate.substr(4); } } //Adjustment for short years entered if (strYear.length == 2) { strYear = '20' + strYear; } strTemp = strDay; strDay = strMonth; strMonth = strTemp; intday = parseInt(strDay, 10); if (isNaN(intday)) { err = 2; return false; } intMonth = parseInt(strMonth, 10); if (isNaN(intMonth)) { for (i = 0;i<12;i++) { if (strMonth.toUpperCase() == strMonthArray[i].toUpperCase()) { intMonth = i+1; strMonth = strMonthArray[i]; i = 12; } } if (isNaN(intMonth)) { err = 3; return false; } } intYear = parseInt(strYear, 10); if (isNaN(intYear)) { err = 4; return false; } if (intMonth>12 || intMonth<1) { err = 5; return false; } if ((intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7 || intMonth == 8 || intMonth == 10 || intMonth == 12) && (intday > 31 || intday < 1)) { err = 6; return false; } if ((intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11) && (intday > 30 || intday < 1)) { err = 7; return false; } if (intMonth == 2) { if (intday < 1) { err = 8; return false; } if (LeapYear(intYear) == true) { if (intday > 29) { err = 9; return false; } } else { if (intday > 28) { err = 10; return false; } } } return true; } function LeapYear(intYear) { if (intYear % 100 == 0) { if (intYear % 400 == 0) { return true; } } else { if ((intYear % 4) == 0) { return true; } } return false; } // End --> </script> </HEAD> <!-- STEP TWO: Insert the onLoad event handler into your BODY tag --> <BODY onLoad="document.dateTest.testDateFormat1.focus()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <form name=dateTest> <table border=0 width=400> <tr> <td> <table align=center border=1 width=400> <tr> <td bgcolor=blue width=75%> <font color=yellow>Enter 1st. Date - mm/dd/yyyy Format</font> </td> <td> <input type="text" name="testDateFormat1" size='10' maxlength="10" onFocus="javascript:vDateType='1'" onKeyUp="DateFormat(this,this.value,event,false,'1')" onBlur="DateFormat(this,this.value,event,true,'1')"> </td> </tr> </table> </td> </tr> <tr> <td> <table align=center border=1 width=400> <tr> <td bgcolor=blue width=75%> <font color=yellow>Enter 2nd. Date - yyyy/mm/dd Format</font> </td> <td> <input type="text" name="testDateFormat3" size='10' maxlength="10" onFocus="javascript:vDateType='2'" onKeyUp="DateFormat(this,this.value,event,false,'2')" onBlur="DateFormat(this,this.value,event,true,'2')"> </td> </tr> </table> </td> </tr> <tr> <td> <table align=center border=1 width=400> <tr> <td bgcolor=blue width=75%> <font color=yellow>Enter 3rd. Date - dd/mm/yyyy Format</font> </td> <td> <input type="text" name="testDateFormat5" size='10' maxlength="10" onFocus="javascript:vDateType='3'" onKeyUp="DateFormat(this,this.value,event,false,'3')" onBlur="DateFormat(this,this.value,event,true,'3')"> </td> </tr> </table> </td> </tr> <tr> <td> <table border=1> <tr> <td bgcolor=blue align=center> <font size=+1 color=yellow>Automatic Formatting For Date Fields</font> </td> </tr> <tr> <td> <table border=0> <tr> <td> <b>Navigator 4.x versions</b> </td> <td> Formatting will happen when all 8 numbers are entered. </td> </tr> <tr> <td> <b>Navigator 6.x versions</b> </td> <td> Formatting will happen as you enter the numbers. </td> </tr> <tr> <td> <b>IE versions</b> </td> <td> Formatting will happen as you enter the numbers. </td> </tr> </table> </td> </tr> <tr> <td align=center bgcolor=silver> <font size=+1 color=blue>Date Validation Will Occur As You Leave Field</font> </td> </tr> </table> </td> </tr> </table> </form> <!-- Script Size: 14.97 KB -->