Date-time input controls implemented with JavaScript

Control in B/s program design, often need to input a date or time to an input box, and verify that the input is valid. The usual authentication method is to perform string validation at the time of submission, or to submit the error if it is a valid date or time. Alternatively, the input of the date time into several Drop-down list boxes, which are selected by the user on the day of the month.





here gives a date-time input validation script written in JavaScript. This script can make a normal input box into a date time input box. You can only enter a date-time format string in this input box without allowing you to enter any other characters. When you enter illegal characters, it is not irresponsible to eject the error dialog box, but completely filter out your input to ensure that the contents of your input box is absolutely legitimate date-time format.





In fact, you can add other validation functions to this script to allow the script to control input from other types of formats, such as numbers, emails, user IDs, and so on.




The
code is as follows:


<script>


function Istime (str) {


var a = Str.match (/^ (\d{0,2}):(\d{0,2}):(\d{0,2);


if (a = = null) return false;


if (a[1]>=24 | | a[2]>=60 | | a[3]>=60) return FALSE;


return true;


}


function Isdatetime (str) {


var a = Str.match (/^ (\d{0,4})-(\d{0,2})-(\d{0,2}) (\d{0,2}):(\d{0,2}):(\d{0,2);


if (a = = null) return false;


if (a[2]>=13 | | a[3]>=32 | | a[4]>=24 | | a[5]>=60 | | a[6]>=60) return FALSE;


return true;


}


function IsDate (str) {


var a = Str.match (/^ (\d{0,4})-(\d{0,2})-(\d{0,2}) $/);


if (a = = null) return false;


if (a[2]>=13 | | a[3]>=32 | | a[4]>=24) return FALSE;


return true;


}


function Validate (obj,type) {


var range=obj.createtextrange ();


var text = Range.Text;


var selrange = Document.selection.createRange ();


var seltext = Selrange.text;


var startpos = 0,endpos = 0;


while (selrange.compareendpoints ("Starttostart", Range) >0) {


Selrange.movestart ("character",-1);


startpos + +;


}


while (selrange.compareendpoints ("Endtostart", Range) >0) {


Selrange.moveend ("character",-1);


Endpos + +;


}


if (event.keycode>=48) {


var keytext = String.fromCharCode (Event.keycode);


Text = text.substring (0,startpos) + Keytext + text.substring (endpos,text.length);


}else if (Event.keycode = =) {//delete


if (startpos = = endpos) Text = text.substring (0,startpos) + text.substring (startpos+1,text.length);


Else Text = text.substring (0,startpos) + text.substring (endpos,text.length);


}else if (Event.keycode = 8) {


if (startpos = = endpos) Text = text.substring (0,startpos-1) + text.substring (startpos,text.length);


Else Text = text.substring (0,startpos) + text.substring (endpos,text.length);


}


if (Event.keycode = = 45) {


Event.returnvalue = false;


return;


}


var valid;


switch (type) {


Case 1:valid = isDate (text);


Case 2:valid = istime (text);


Case 3:valid = isdatetime (text);


default:valid = false;


}


if (!valid) {


Event.returnvalue = false;


}


}


</script>


put the above code anywhere on the Web page.


Use method:


Date Validation box: <input onkeydown= "Validate (this,1)" value= "0000-00-00" >





Time Verification Box: <input onkeydown= "Validate (this,2)" value= "00:00:00" >





Date Time Verification box: <input onkeydown= "Validate (this,3)" value= "0000-00-00 00:00:00" >





we can test it.


Add the following on the page:


<input id= "date" onkeydown= "Validate (this,3)" value= "0000-00-00 00:00:00" >


then you can try to enter any content into the input box and see how it works.