How to Add Date Separator Automatically When Typing in Textbox using Javascript

How to Add Date Separator Automatically When Typing in Textbox using Javascript

Sometimes we want to add a functionality on a textbox on typing to adding date separator automatically and this would be very useful thing and can save your time when filling forms and you need to put only numeric values and the separator automatically adds into the textbox, so here is a simple code to add this functionality to textbox using javascript code....

Try Demo by typing into the Textbox...  

<script type="text/javascript">
function addDateSeparator(e, control, format){
       
        this.Format = format;
        var keycode = (e.which) ? e.which : event.keyCode              
       
        if (keycode > 31 && (keycode < 48 || keycode > 57)){
                return false;
        }else{
        
                var DateFormatPattern = /^dd\/mm\/yyyy$|^mm\/dd\/yyyy$|^mm\/dd\/yyyy$|^yyyy\/mm\/dd$/;
                if ( DateFormatPattern.test(this.Format) ){
               
                        var SplitFormat = this.Format.split("/");
                        if ( control.value.length  >= this.Format.length ){
                       
                                if ( keycode !=8){
                                        return false;
                                }
                        }
                        if ( control.value.length == SplitFormat[0].length ){
                       
                                if ( keycode !=8){
                                        control.value += '/';
                                }
                        }
                        if ( control.value.length == (SplitFormat[1].length + SplitFormat[0].length +1) ){
                       
                                if ( keycode !=8){
                                        control.value += '/';
                                }
                        }
                }else{
                        alert("Supplied date format parameter is incorrect.");
                }
        }
}</script>

To use the above code you need to copy above code and paste this inside the <script></script> tag and call the addDateSeparator function on onkeyup event of any text box like below

<input type="text" onkeyup="addDateSeparator(event,this,'dd/mm/yyyy')"/>

then you can use this nice functionality in your application