What's the best way to automatically insert slashes '/' in date fields

Question

I'm trying to add functionality to input date fields so as when the users enters in digits, slashes "/" get automatically added.

So suppose I have the following html:

<input type="text" id="fooDate" /> 

And suppose I have the following javascript:

var dateField = document.getElementById("fooDate"); dateField.onkeyup = bar; 

What should bar be?

So far the best google result was:

function bar(evt) {     var v = this.value;     if (v.match(/^\d{2}$/) !== null) {         this.value = v + '/';     } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {         this.value = v + '/';     }  } 

Thanks!

also -- I know having slashes being entered as you type sucks. Just roll with it :p

Answer 1

Update/Edit: Obviously the most simple solution today with widespread HTML5 support is to use <input type="date" name="yourName">.

For those complaining that it doesn't accommodate backspaces or pasting, I modified the original:

//Put our input DOM element into a jQuery Object var $jqDate = jQuery('input[name="jqueryDate"]');  //Bind keyup/keydown to the input $jqDate.bind('keyup','keydown', function(e){    //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:     if(e.which !== 8) {          var numChars = $jqDate.val().length;         if(numChars === 2 || numChars === 5){             var thisVal = $jqDate.val();             thisVal += '/';             $jqDate.val(thisVal);         }   } }); 

`

Working Fiddle: https://jsfiddle.net/ChrisCoray/hLkjhsce/

Answer 2

This is one simples way:

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,'')">

Here ia a fiddle : https://jsfiddle.net/y6mnpc1j/