How can I validate the date format in client side .net c#?

Question

Does anyone know how can I validate the date format in client side in .net c#?

Example:

I have the following input, how can I validate the date formate to DD-MM-YYYY??

    <tr>
        <td align="right">Start Date:</td>
        <td><asp:TextBox runat="server" ID="activeDate" MaxLength="10" size="8"/>(DD-MM-YYYY)
        </td>
    </tr>

Answer 1

Firstly, many people suggest using the Regex Validator in ASP.NET's toolkit to validate against the regex.

However this is not culture sensitive eg UK == DD/MM/YYYY whereas USA == MM/DD/YYYY and many people use ISO YYYY-MM-DD

A better way would be to use the CompareValidator and do a type check:

    <asp:CompareValidator ID="CompareValidator1" runat="server" 
           ControlToValidate="DateTextBox" ErrorMessage="Enter a valid date"
           Operator="DataTypeCheck" Type="Date" ValidationGroup="GroupName" />

You can couple this with a DateTimePicker, AJAX toolkit and a ScriptManager too for more functionality, though the above example will work.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
                     TagPrefix="ajaxToolkit" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Label ID="lblDate" runat="server" Text="Date: "></asp:Label>
        <asp:TextBox ID="txtDate" runat="server" Width="140px"></asp:TextBox>
        <asp:Image ID="imgCalendar" runat="server" ImageUrl="~/Images/Calendar.png" />
        <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" 
               TargetControlID="txtDate" Format="MM/dd/yyyy" 
               PopupButtonID="imgCalendar" />
        <asp:CompareValidator ID="CompareValidator1" runat="server" 
               ControlToValidate="txtDate" ErrorMessage="* Enter a valid date"
               Operator="DataTypeCheck" Type="Date" ValidationGroup="grpDate" />

http://blogs.mgtechgroup.com/markc/archive/2007/06/07/ASP.NET-Date-Validator.aspx

Answer 2

Are you open to using JQuery and the validation plugin?

An example doing pretty much what you're asking for is here.

Just inlining it for simplicity.

$.validator.addMethod(
"australianDate",
function(value, element) {
    // put your own logic here, this is just a (crappy) example
    return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Please enter a date in the format dd/mm/yyyy"
);

And then on your form:

$('#myForm')
.validate({
    rules :
        myDate : {
            australianDate : true
        }
})
;

Answer 3

use this javascript and call this onchange event of textbox

`

<script language = "Javascript">

// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
    var i;
    for (i = 0; i < s.length; i++){   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
    var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){   
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary (year){
    // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
    for (var i = 1; i <= n; i++) {
        this[i] = 31
        if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
        if (i==2) {this[i] = 29}
   } 
   return this
}

function isDate(dtStr){
    var daysInMonth = DaysArray(12)
    var pos1=dtStr.indexOf(dtCh)
    var pos2=dtStr.indexOf(dtCh,pos1+1)
    var strDay=dtStr.substring(0,pos1)
    var strMonth=dtStr.substring(pos1+1,pos2)
    var strYear=dtStr.substring(pos2+1)
    strYr=strYear
    if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
    if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
    for (var i = 1; i <= 3; i++) {
        if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
    }
    month=parseInt(strMonth)
    day=parseInt(strDay)
    year=parseInt(strYr)
    if (pos1==-1 || pos2==-1){
        alert("The date format should be : dd/mm/yyyy")
        return false
    }
    if (strMonth.length<1 || month<1 || month>12){
        alert("Please enter a valid month")
        return false
    }
    if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
        alert("Please enter a valid day")
        return false
    }
    if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
        alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
        return false
    }
    if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
        alert("Please enter a valid date")
        return false
    }
return true
}

function ValidateForm(){
    var dt=document.frmSample.txtDate
    if (isDate(dt.value)==false){
        dt.focus()
        return false
    }
    return true
 }

</script>`