javascript - 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/