Although you can use a RangeValidator
or CustomValidator
to evaluate the contents of a textbox
that captures a date, there might be instances in which you want to use a Client-JavaScript to manually validate or manipulate what's typed.
Another possible situation is to do this on the code behind to validate the input at the moment the data is sent to the server.
After reading a few blogs and articles, below are two JavaScript functions that I've found extremely useful to validate dates.
Validating the String
Notice how this function will evaluate a string
input by using a regular expression. It separates the string
and checks if the date
elements fall within the numeric range established.
function validateUSDate(strValue) {
var objRegExp = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
if (!objRegExp.test(strValue))
return false;
else {
var strSeparator = strValue.substring(2, 3)
var arrayDate = strValue.split(strSeparator);
var arrayLookup = { '01': 31, '03': 31,
'04': 30, '05': 31,
'06': 30, '07': 31,
'08': 31, '09': 30,
'10': 31, '11': 30, '12': 31
}
var intDay = parseInt(arrayDate[1], 10);
if (arrayLookup[arrayDate[0]] != null) {
if (intDay <= arrayLookup[arrayDate[0]] && intDay != 0)
return true;
}
var intMonth = parseInt(arrayDate[0], 10);
if (intMonth == 2) {
var intYear = parseInt(arrayDate[2]);
if (intDay > 0 && intDay < 29) {
return true;
}
else if (intDay == 29) {
if ((intYear % 4 == 0) && (intYear % 100 != 0) ||
(intYear % 400 == 0)) {
return true;
}
}
}
}
return false;
}
Implementing validateUSDate
Below is another function that demonstrates how the validateUSDate
function is being implemented in the JavaScript attached to the TextBox
's OnBlur
event. If the entered date
fails, we default the date
to Today
.
function fWorkDateValidate(str, object) {
var dt = new Date();
var dd = dt.getDate();
var mm = dt.getMonth() + 1;
var yyyy = dt.getFullYear();
if (dd < 10) { dd = '0' + dd }
if (mm < 10) { mm = '0' + mm }
var today = mm + '/' + dd + '/' + yyyy;
if (validateUSDate(str) == false ) {
alert('Invalid Work Date entered. Please specify date in format mm/dd/yyyy.
Example: ' + today);
object.value = today;
object.focus();
}
}
Textbox Date HTML
<asp:TextBox ID="TextBox3" runat="server"
style="font-family: Arial, Helvetica, sans-serif;font-size: small;
text-align: right; color: #FF6600"
Width="81px"onBlur="fWorkDateValidate(this.value, this);" MaxLength="10"></asp:TextBox>
I have to admit that I didn't write validateUSDate
, I just modified it to fit my needs, I wanted to give credit to the authors but unfortunately since I tried code from several blogs, I can't find the exact pages where I took the function from. So credit is due to the author(s), whoever they are.
In case you need to validate a date
range in code behind, below is an "if
" statement to validate data elements using a Regular Expression. Notice how we can easily define the ranges, for example 0 to 1 and 0-9 for the month digits, then a "/", then a 0-3 for the first digit of the day and so on... you get the idea.
if (String.IsNullOrEmpty(TextBox3.Text) ||
Regex.IsMatch(TextBox3.Text, @"^[0-1]?[0-9](/|-)[0-3]?[0-9](/|-)
[1-2][0-9][0-9][0-9]$") == false)
RangeValidator
Finally, let's review how can you use a RangeValidator
to evaluate a date
. It is a piece of cake. Just keep in mind that you need to specify a "type
" of Date
on your Validator
and define the Minimum
and Maximum
Values.
<asp:RangeValidator ID="StDateValidator" runat="server"
ControlToValidate="TextBox1" Type="Date"
MinimumValue="01/21/1980" MaximumValue="12/31/2100"
ErrorMessage="Invalid Start Date. Please verify."
style="font-family: Arial, Helvetica, sans-serif;
font-size: xx-small; font-weight: 700"></asp:RangeValidator>
The validator will display the error message automatically, if the data on TextBox1
does not pass the validation.
Happy coding,
Will
CodeProject
<meta name="Date Validation JavaScript vs Code Behind, vs DateRangeValidator" />