jQuery Date Mimic

by ChrisCoray

HTML

<div style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 150%;">
  <strong>HTML5 "date" input type:</strong> <input type="date" name="html5date"><br>
  <strong>jQuery "date" input type mimic:</strong> <input type="text" name="jqueryDate" placeholder="mm/dd/yyyy"><br>
  Key Input: <span id="keyP">null</span>
</div>

JavaScript

//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);
		}
  }
});