Date-time input controls implemented with JavaScript

In B/s programming, it is often necessary to enter a date or time into 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.

This 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, allowing 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.
How to use:
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 validation 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.