Thursday, 22 November 2012

Textbox Date validation in javascript

JavaScript Code-

<script language="javascript" type="text/javascript">
    function isDate(txtDate, separator) {
        var aoDate,           // needed for creating array and object
        ms,               // date in milliseconds
        month, day, year; // (integer) month, day and year
        // if separator is not defined then set '/'
        if (separator === undefined) {
            separator = '/';
        }
        // split input date to month, day and year
        aoDate = txtDate.split(separator);
        // array length should be exactly 3 (no more no less)
        if (aoDate.length !== 3) {
            return false;
        }
        // define month, day and year from array (expected format is m/d/yyyy)
        // subtraction will cast variables to integer implicitly
        month = aoDate[1] - 1; // because months in JS start from 0
        day = aoDate[0] - 0;
        year = aoDate[2] - 0;
        // test year range
        if (year < 1000 || year > 3000) {
            return false;
        }
        // convert input date to milliseconds
        ms = (new Date(year, month, day)).getTime();
        // initialize Date() object from milliseconds (reuse aoDate variable)
        aoDate = new Date();
        aoDate.setTime(ms);
        // compare input date and parts from Date() object
        // if difference exists then input date is not valid
        if (aoDate.getFullYear() !== year ||
        aoDate.getMonth() !== month ||
        aoDate.getDate() !== day) {
            return false;
        }
        // date is OK, return true
        return true;
    }
    function checkDate() {
        // define date string to test
        var dt = document.getElementById('<%=TxtDate.ClientID %>');
        var txtDate = document.getElementById('<%=TxtDate.ClientID %>').value;
        // check date and print message
        if (isDate(txtDate)) {
            return true;
        }
        else {
            alert('Invalid date format!');
            dt.value = "";
            dt.focus();
            return false;
        }
    }
</script>

<asp:TextBox ID="TxtDate" runat="server"OnChange="checkDate();"></asp:TextBox>

No comments:

Post a Comment