Java script For Mask Date Control in Web application

Posted Date: 16 Apr 2007	Resource Type: Articles	Category: General
Author: M.Sathiskumar	Member Level: Silver
Rating:	Points: 10

Mask Date Control Java Script

This script for convert a textbox to Masked Date Control

Date Input box we can set mask input box means same like windows application mask input.

this is for web application . this java script a textbox convert Date mask control
onfocus time it shows dd/mm/yyyy. if you key press it change __/__/____ this format.
It take date format data only allowed.


<input runat="server" id="Text1" type="text"  
onfocus="javascript:DateControl('Text1')" 
style="width: 150px" maxlength="10" />

set attribute for which text box you want convert masked Date control

Set Onfocus="javascript:DateControl('text1')" MaxLength=10

Just Copy This Code And paste in a html Document

Code For Masked Date Control


   <input runat="server" id="Text1" type="text" onfocus="javascript:DateControl('Text1')" 
        style="width: 150px" maxlength="10" /><br />


 <b><font size="4" color="#FF00FF">Java Script For  Masked Date Control Sample Program</font></b> 
<br/>copy following code paste notpad save as Html File And open in  IE
 <script language="javascript"  type="text/javascript">   
 var c_txtid;
    var c_count=0;
     var Tchar;
     var bl_count=0;
     var astext="__/__/____"; //
    function DateControl123(cnt_id)
    {
     c_txtid=cnt_id;    
     document.getElementById(cnt_id).style.textAlign="center";  
     document.getElementById(cnt_id).setAttribute("maxlength",10)
     if(document.getElementById(cnt_id).value=="")
     document.getElementById(cnt_id).value="dd/mm/yyyy"; 
     document.getElementById(cnt_id).setAttribute("onblur",clear);
     document.getElementById(cnt_id).setAttribute("onkeydown",noNumbers);
     document.getElementById(cnt_id).maxlength="10";     
    }
    function clear()
   {
   astext="__/__/____";//
    c_count=0;
    if (datechks()==1)
    {
      //alert("InValid Date");
     //document.write("InValid Date");
      document.getElementById(c_txtid).value="dd/mm/yyyy";
      document.getElementById(c_txtid).focus();
    }
   }
 
   
    function chk()
{
 var ValidChars = "0123456789/_";
   var IsNumber=true;
   var Char;     
   var stext= document.getElementById(c_txtid).value;
   if (c_count==1)   
   {  
   //document.getElementById(c_txtid).value="__/__/____"   
   }
   
 
   for (i = 0; i < stext.length && IsNumber == true; i++) 
      { 
      Char = stext.charAt(i); 
      if (ValidChars.indexOf(Char) == -1) 
         {
         document.getElementById(c_txtid).value=stext.replace(Char,"")
         IsNumber = false;       
         }
      }                  
    switch (Tchar){case '`': Tchar=0;break;case 'a': Tchar=1;break;case 'b': Tchar=2;break;case 'c': Tchar=3;break;case 'd': Tchar=4;break;case 'e': Tchar=5;break;case 'f': Tchar=6;break;case 'g': Tchar=7;break;case 'h': Tchar=8;break;case 'i': Tchar=9;break;}
      switch (c_count)
      {
         case 1:
         if (Tchar<4)
         {
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;       
         }
         else
         {
          c_count--;
         }
         break;
         
         case 2:        
         if (Tchar<2 || stext.charAt(0)<3)
         {
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;
         }
          else
         {
          c_count--;
         }
         break;
         
         case 3:
         if(Tchar<2)         
         {
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;
         }
         else
         {
          c_count--;
         }
         break;
         
         case 4:          
         if (Tchar<3 || stext.charAt(3)=="0")
         {
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;
         }
         else
         {
          c_count--;
         }
         break;
         
         case 5:
          if (Tchar==2 || Tchar==1 )
          {
            astext=astext.replace("_",Tchar)
            document.getElementById(c_txtid).value=astext;
            }
          else
         {
          c_count--;
         }  
         break;
         
         case 6:
          if (Tchar==9 || Tchar==0 )
          {
           astext=astext.replace("_",Tchar)
           document.getElementById(c_txtid).value=astext;
          }
          else
          {
           c_count--;
          }  
         break;
         
         case 7:
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;
         break;
         
         case 8:
         astext=astext.replace("_",Tchar)
         document.getElementById(c_txtid).value=astext;                          
         break;
         
         case 9:
         c_count=0;
         astext="__/__/____";//
         document.getElementById(c_txtid).value="__/__/____" //      
         break;
        }
        
         
    return IsNumber ; 
}

function noNumbers()
{
var keynum
var keychar
var numcheck;
if(window.event) // IE
{
keynum = event.keyCode
}
else if(event.which) // Netscape/Firefox/Opera
{
keynum = event.which
}
keychar = String.fromCharCode(keynum)
 Tchar=keychar;
 c_count++;
numcheck = /\d/;
//alert(keynum)
if(keynum!=9 && ((keynum >47 && keynum <58) || (keynum >95 && keynum <106) )   )
{
chk();
}
else
return 0;
return numcheck.test(keychar)

}

   function  datechks()
    {      
     var txtdate;
     var subtxt;     
     txtdate =  document.getElementById(c_txtid).value;
     //alert(txtdate); //document.getElementById(txtid).value;
     txtdate=txtdate.replace(" ","")     
     if(txtdate.length > 0)
     {
     if(txtdate.length > 7 && txtdate.length < 11)
     {        
      subtxt =txtdate.substr(0,txtdate.indexOf("/"));
      txtdate=txtdate.substr(txtdate.indexOf("/")+1,txtdate.length);      
      if (subtxt >0 && subtxt < 32)
      {         
        subtxt =txtdate.substr(0,txtdate.indexOf("/"));
        txtdate=txtdate.substr(txtdate.indexOf("/")+1,txtdate.length);        
        if (subtxt >0 && subtxt < 13)
         {           
            if (txtdate.length > 3  )
            {
             return 0;
             }
           } 
        }
        }     
     }          
      return 1;
    }
    </script> 
         <div>        
 <div style="overflow: scroll; width: 539px; height: 368px; border-right: blue 1px solid; border-top: blue 1px solid; border-left: blue 1px solid; border-bottom: blue 1px solid; color: #3333cc; font-family: 'Courier New'; font-size: 14px; vertical-align: top; text-align: left;">
      <html  ><br>
        <head runat="server"><br>
        <title>Untitled Page</title><br>
        <script language="javascript" type="text/javascript"> <br>
        // JScript File<br>
        // Text Field add onfocus=javascript:DateControl('Textboxid')<br>
        //it is automaticaly convert date Masked Date control<br>
        //Created by M.Sathiskumar(16/04/2007)<br>
        <br>
        var c_txtid;<br>
        var c_count=0;<br>
        var Tchar;<br>
        var bl_count=0;<br>
        var astext="__/__/____"; //<br>
        function DateControl(cnt_id)<br>
        {<br>
        c_txtid=cnt_id; <br>
        document.getElementById(cnt_id).style.textAlign="center"; <br>
        document.getElementById(cnt_id).setAttribute("maxlength",10)<br>
        if(document.getElementById(cnt_id).value=="")<br>
        document.getElementById(cnt_id).value="dd/mm/yyyy"; <br>
        document.getElementById(cnt_id).setAttribute("onblur",clear);<br>
        document.getElementById(cnt_id).setAttribute("onkeydown",noNumbers);<br>
        document.getElementById(cnt_id).maxlength="10"; <br>
        }<br>
        function clear()<br>
        {<br>
        astext="__/__/____";//<br>
        c_count=0;<br>
        if (datechks()==1)<br>
        {<br>
        //alert("InValid Date");<br>
        //document.write("InValid Date");<br>
        document.getElementById(c_txtid).value="dd/mm/yyyy";<br>
        document.getElementById(c_txtid).focus();<br>
        }<br>
        }<br>
        <br>
        <br>
        function chk()<br>
        {<br>
        var ValidChars = "0123456789/_";<br>
        var IsNumber=true;<br>
        var Char; <br>
        var stext= document.getElementById(c_txtid).value;<br>
        if (c_count==1) <br>
        { <br>
        //document.getElementById(c_txtid).value="__/__/____" <br>
        }<br>
        <br>
        <br>
        for (i = 0; i < stext.length && IsNumber == true; i++) <br>
        { <br>
        Char = stext.charAt(i); <br>
        if (ValidChars.indexOf(Char) == -1) <br>
        {<br>
        document.getElementById(c_txtid).value=stext.replace(Char,"")<br>
        IsNumber = false; <br>
        }<br>
        } <br>
        switch (Tchar){case '`': Tchar=0;break;case 'a': Tchar=1;break;case 'b': 
        Tchar=2;break;case 'c': Tchar=3;break;case 'd': Tchar=4;break;case 'e': 
        Tchar=5;break;case 'f': Tchar=6;break;case 'g': Tchar=7;break;case 'h': 
        Tchar=8;break;case 'i': Tchar=9;break;}<br>
        switch (c_count)<br>
        {<br>
        case 1:<br>
        if (Tchar<4)<br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext; <br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        }<br>
        break;<br>
        <br>
        case 2: <br>
        if (Tchar<2 || stext.charAt(0)<3)<br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        }<br>
        break;<br>
        <br>
        case 3:<br>
        if(Tchar<2) <br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        }<br>
        break;<br>
        <br>
        case 4: <br>
        if (Tchar<3 || stext.charAt(3)=="0")<br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        }<br>
        break;<br>
        <br>
        case 5:<br>
        if (Tchar==2 || Tchar==1 )<br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        } <br>
        break;<br>
        <br>
        case 6:<br>
        if (Tchar==9 || Tchar==0 )<br>
        {<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        }<br>
        else<br>
        {<br>
        c_count--;<br>
        } <br>
        break;<br>
        <br>
        case 7:<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext;<br>
        break;<br>
        <br>
        case 8:<br>
        astext=astext.replace("_",Tchar)<br>
        document.getElementById(c_txtid).value=astext; <br>
        break;<br>
        <br>
        case 9:<br>
        c_count=0;<br>
        astext="__/__/____";//<br>
        document.getElementById(c_txtid).value="__/__/____" // <br>
        break;<br>
        }<br>
        <br>
        <br>
        return IsNumber ; <br>
        }<br>
        <br>
        function noNumbers()<br>
        {<br>
        var keynum<br>
        var keychar<br>
        var numcheck;<br>
        if(window.event) // IE<br>
        {<br>
        keynum = event.keyCode<br>
        }<br>
        else if(event.which) // Netscape/Firefox/Opera<br>
        {<br>
        keynum = event.which<br>
        }<br>
        keychar = String.fromCharCode(keynum)<br>
        Tchar=keychar;<br>
        c_count++;<br>
        numcheck = /\d/;<br>
        //alert(keynum)<br>
        if(keynum!=9 && ((keynum >47 && keynum <58) || (keynum >95 && keynum 
        <106) ) )<br>
        {<br>
        chk();<br>
        }<br>
        else<br>
        return 0;<br>
        return numcheck.test(keychar)<br>
        <br>
        }<br>
        <br>
        function datechks()<br>
        { <br>
        var txtdate;<br>
        var subtxt; <br>
        txtdate = document.getElementById(c_txtid).value;<br>
        //alert(txtdate); //document.getElementById(txtid).value;<br>
        txtdate=txtdate.replace(" ","") <br>
        if(txtdate.length > 0)<br>
        {<br>
        if(txtdate.length > 7 && txtdate.length < 11)<br>
        { <br>
        subtxt =txtdate.substr(0,txtdate.indexOf("/"));<br>
        txtdate=txtdate.substr(txtdate.indexOf("/")+1,txtdate.length); <br>
        if (subtxt >0 && subtxt < 32)<br>
        { <br>
        subtxt =txtdate.substr(0,txtdate.indexOf("/"));<br>
        txtdate=txtdate.substr(txtdate.indexOf("/")+1,txtdate.length); <br>
        if (subtxt >0 && subtxt < 13)<br>
        { <br>
        if (txtdate.length > 3 )<br>
        { <br>
        <br>
        return 0;<br>
        }<br>
        } <br>
        }<br>
        } <br>
        } <br>
        return 1;<br>
        }<br>
        <br>
        <br>
        </script> <br>
        </head><br>
        <body><br>
        <form id="form1" runat="server"><br>
        <div> <br>
        Date:<br>
        <input runat="server" id="Text1" type="text" onfocus="javascript:DateControl('Text1')" 
        style="width: 150px" maxlength="10" /><br /><br>
        <br /><br>
        <br /><br>
        <input id="Text2" type="text" /></div><br>
        </form><br>
        </body><br>
        </html></div>
        <b>OutPut:</b>
        <p>Date:
        <input runat="server" id="Text1" type="text"  onfocus="javascript:DateControl_123('Text1')" style="width: 150px" maxlength="10" size="20" /><br />
        <br />
        <br />
     <div>

Responses

No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks

Popular Tags

What are tags ?

Search Tags

Mask date control . Javascript .

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Comprehensive and Quicker Validation of Email Address
	Previous Resource: Windows Sharepoint Services and its practical uses
	Return to Discussion Resource Index
	Post New Resource
	Category: General

Post resources and earn money!

Related Resources