Date-time input control with JavaScript

In the B / S programming, you often need to enter a date or time to an input box and verify that the input is valid. The usual verification method is to perform string verification when submitted, if it is a legal date time, it is submitted normally, otherwise it will be canceled and the error message is given. Alternatively, turn the input date time into several drop-down list boxes, by the user to choose the month and months. Here is given a datetime input verification script written in JavaScript. This script allows a normal input box to become a datetime input box. You can only enter the characteristic string in this input box without allowing you to enter any other characters. When you enter an illegal character, it is not responsible to popping up the error dialog, but filtering out your input to ensure that your input box is definitely a legal datetime format. In fact, you can add additional verification functions to this script, allowing this script to control other types of format inputs, such as numbers, emails, user IDs, etc. code show as below:

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 = sleelnge.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 == 46) {// 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); Break;

Case 2: Valid = ISTIME (text); Break;

Case 3: Valid = isdatetime (text); Break;

Default: valid = false;

}

IF (! Valid) {

Event.ReturnValue = false;

}

}

// ->

Place the above code in any location of the web page. How to use: Date Verification Box: Time Verification Box: Date Time Verification Box: We can test it. You can try to enter any date time in this input box, look at what effect.