How To Add A Back Slash To The TextBox For Date Format

Question

This Is My JavaScript:

`

function ValidateDate(txt, keyCode)
        {
            if(keyCode==16)
                isShift = false;
            var val=txt.value;
            var lblmesg = document.getElementById("<%=lblMesg.ClientID%>") ;
            if(val.length == 10)
            {
                var splits = val.split("/");
                var dt = new Date(splits[1] + "/" + splits[0] + "/" + splits[2]);

                //Validation for Dates
                if(dt.getDate()==splits[0] && dt.getMonth()+1==splits[1] && dt.getFullYear()==splits[2])
                {
                    lblmesg.style.color="green";
                    lblmesg.innerHTML = "Valid Date";
                }
                else
                {
                    lblmesg.style.color="red";
                    lblmesg.innerHTML = "InValid Date";
                    return;
                } 

                //Range Validation
                if(txt.id.indexOf("txtRange") != -1)
                    RangeValidation(dt);

                //BirthDate Validation
                if(txt.id.indexOf("txtBirthDate") != -1)                
                    BirthDateValidation(dt)
            }
            else if(val.length < 10)
            {
                lblmesg.style.color="blue";
                lblmesg.innerHTML = "Required dd/mm/yy format. Slashes will come up automatically.";
            }
        }`

And This Is My TextBox:

> <asp:TextBox ID="txtValidate" runat="server" MaxLength = "10" onkeyup = "ValidateDate(this, event.keyCode)" onkeydown = "return DateFormat(this, event.keyCode)"></asp:TextBox>

I want to include a slash within a TextBox for typing a Date.. I don't want it to generate a slash while typing...it should be static when the page is loaded.... Is it possible to do that without using AjaxToolkit ???

Answer 1

I made a simple example for your purpose:

var date = document.getElementById('date');

date.addEventListener('keypress', function (event) {
    var char = String.fromCharCode(event.which),
        offset = date.selectionStart;

    if (/\d/.test(char) && offset < 8) {

        if (offset === 2 || offset === 5) {
            offset += 1;
        }
        date.value = date.value.substr(0, offset) + char + date.value.substr(offset + 1);
        date.selectionStart = date.selectionEnd = offset + 1;
    }

    if (!event.keyCode) {
        event.preventDefault();
    }
});

Here is a fiddle

Answer 2

I use this simple replace

Date: <input name=x size=10 maxlength=10  onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')">

Try it with jsfiddle

Answer 3

Here is a shorter version:

    $("#txtDate").keyup(function(){
      if ($(this).val().length == 2 || $(this).val().length == 5){
         $(this).val($(this).val() + "/");
      }
   });