In this article I will explain with an example, how to mask dd/MM/yyyy Date Format in TextBox using JavaScript.
This article will illustrate how to automatically mask dd/MM/yyyy format in TextBox by automatically adding Slash character after 2nd character and 4th character using JavaScript.
 
 
HTML Markup
The following HTML Markup consists of a TextBox.
The TextBox which needs to be validated for Date are assigned CssClass date-format and it also have its associated HTML SPAN elements for displaying failed validation message.
<table id="tblForm" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td>Birth Date:</td>
        <td><input type="text" class="date-format" /></td>
        <td><span class="error" style="display: none">Invalid Date. Only dd/MM/yyyy format allowed.</span></td>
    </tr>
</table>
 
 
Masking dd/MM/yyyy Date Format in TextBox using JavaScript
Inside the window.onload event handler, first all the HTML INPUT elements are fetched from HTML Table and then a loop is run over the fetched elements.
Inside the loop, a check is performed to determined, whether the HTML INPUT element is a TextBox and also whether it has a CssClass named date-format.
When both the conditions are TRUE, the
1. MaxLength attribute is set to value 10.
2. KeyDown event handler is assigned which calls the IsNumeric JavaScript function.
3. KeyUp event handler is assigned which calls the ValidateDateFormat JavaScript function.
 
IsNumeric function
This function allows only Numbers (digits) to be entered into the TextBox, this is done by checking the Key Codes and cancelling the all Key Codes which are not Numbers (digits).
It also automatically adds Slash ( / ) character.
 
ValidateDateFormat function
This function validates the Date value against the Regular Expression and if the validation fails i.e. if the Date Format is not dd/MM/yyyy, its associated HTML SPAN element within the same HTML Table row is displayed.
<script type="text/javascript">
    var isShift = false;
    var seperator = "/";
    window.onload = function () {
        //Reference the Table.
        var tblForm = document.getElementById("tblForm");
 
        //Reference all INPUT elements in the Table.
        var inputs = document.getElementsByTagName("input");
 
        //Loop through all INPUT elements.
        for (var i = 0; i < inputs.length; i++) {
            //Check whether the INPUT element is TextBox.
            if (inputs[i].type == "text") {
                //Check whether Date Format Validation is required.
                if (inputs[i].className.indexOf("date-format") != 1) {
                       
                    //Set Max Length.
                    inputs[i].setAttribute("maxlength", 10);
 
                    //Only allow Numeric Keys.
                    inputs[i].onkeydown = function (e) {
                        return IsNumeric(this, e.keyCode);
                    };
 
                    //Validate Date as User types.
                    inputs[i].onkeyup = function (e) {
                        ValidateDateFormat(this, e.keyCode);
                    };
                }
            }
        }
    };
 
    function IsNumeric(input, keyCode) {
        if (keyCode == 16) {
            isShift = true;
        }
        //Allow only Numeric Keys.
        if (((keyCode >= 48 && keyCode <= 57) || keyCode == 8 || keyCode <= 37 || keyCode <= 39 || (keyCode >= 96 && keyCode <= 105)) && isShift == false) {
            if ((input.value.length == 2 || input.value.length == 5) && keyCode != 8) {
                input.value += seperator;
            }
 
            return true;
        }
        else {
            return false;
        }
    };
 
    function ValidateDateFormat(input, keyCode) {
        var dateString = input.value;
        if (keyCode == 16) {
            isShift = false;
        }
        var regex = /(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$/;
 
        //Check whether valid dd/MM/yyyy Date Format.
        if (regex.test(dateString) || dateString.length == 0) {
            ShowHideError(input, "none");
        } else {
            ShowHideError(input, "block");
        }
    };
 
    function ShowHideError(textbox, display) {
        var row = textbox.parentNode.parentNode;
        var errorMsg = row.getElementsByTagName("span")[0];
        if (errorMsg != null) {
            errorMsg.style.display = display;
        }
    };
</script>
 
 
Screenshot
Mask dd/MM/yyyy Date Format in TextBox using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code