Using JavaScript for Validation of Different Date Formats in Asp.NET Web Form

Most often asp.net web applications need to validate date in a form. It is not that easy to play with different format of dates at different places. Mostly the mm/dd/yyyy (alternatively, mm-dd-yyyy) format of date is used. But we may need to go dd/mm/yyyy (alternatively, dd-mm-yyyy) also, and yyyy/mm/dd (alternatively, yyyy-mm-dd) format is no exception too. This article will discuss how to validate date in all these formats using simple yet powerful javascript code snippet.

Date of Purchase: <asp:textbox id="txtPurchaseDate" runat="server"></asp:TextBox><br /><cc1:calendarextender id="CalendarExtenderTo" format="dd-MM-yyyy" targetcontrolid="txtPurchaseDate" popupbuttonid="imgCalendarTo" runat="server"></cc1:CalendarExtender><br /><img id="imgCalendar" runat="server" src="SmallCalendar.gif" border="0" /><br /><asp:button id="btnSubmit" runat="server" text="Submit" onclientclick="ValidateForm();"> Remember, we need ajax enabled page to use the calendar extender. Note that I have set the format in the calendarextender to dd-MM-yyyy. This will put the date in the targetcontrol (here, txtPurchaseDate) in dd-mm-yyyy format. On client click of the button btnSubmit, the javascript function ValidateForm() will validate the date in the textbox. If it is not in dd-mm-yyyy format, a message will be alerted as in the figures above. Here are the functions Validateform() and validateInputDate(). function ValidateForm() { if(document.getElementById("txtPurchaseDate")) { if(validateInputDate(document.getElementById("txtPurchaseDate").value)==false) { alert("Please input purchase date in the format dd-mm-yyyy."); return false; } } } //Validates date in the format dd-mm-yyyy (e.g. 19-10-2009) function validateInputDate(dateString){ if (dateString.match(/^(?:(0[1-9][12][0-9]3[01])[\-.](0[1-9]1[012])[\-.](1920)[0-9]{2})$/)) { return true; } else { return false; } } //Validates date in the format dd/mm/yyyy (e.g. 19/10/2009) function validateInputDate(dateString){ if (dateString.match(/^(?:(0[1-9][12][0-9]3[01])[\/.](0[1-9]1[012])[\/.](1920)[0-9]{2})$/)) { return true; } else { return false; } } //Validates date in the format dd-mm-yyyy or dd/mm/yyyy (e.g. 19-10-2009 or 19/10/2009) function validateInputDate(dateString){ if (dateString.match(/^(?:(0[1-9][12][0-9]3[01])[\- \/.](0[1-9]1[012])[\- \/.](1920)[0-9]{2})$/)) { return true; } else { return false; } } // Validates date in the format mm/dd/yyyy (e.g. 10/19/2009) function validateInputDate(dateString){ if (dateString.match(/^(?:(0[1-9]1[012])[\/.](0[1-9][12][0-9]3[01])[\/.](1920)[0-9]{2})$/)) { return true; } else { return false; } } // Validates date in the format yyyy-mm-dd or yyyy/mm/dd (e.g. 2009-10-19 or 2009/10/19) function validateInputDate(dateString){ if (dateString.match(/^(?:(1920)[0-9]{2})[\- \/.](0[1-9]1[012])[\- \/.](0[1-9][12][0-9]3[01])$/)) { return true; } else { return false; } } // Validates date in the format yyyy-mm-dd (e.g. 2009-10-19) function validateInputDate(dateString){ if (dateString.match(/^(?:(1920)[0-9]{2})[\-.](0[1-9]1[012])[\-.](0[1-9][12][0-9]3[01])$/)) { return true; } else { return false; } } // Validates date in the format yyyy/mm/dd (e.g. 2009/10/19) function validateInputDate(dateString){ if (dateString.match(/^(?:(1920)[0-9]{2})[\/.](0[1-9]1[012])[\/.](0[1-9][12][0-9]3[01])$/)) { return true; } else { return false; } }