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

Answer 1

This solution works for me. I have captured the blur event though you will have to change the code if you want to use keyup event. HTML

<input type="text" id="fooDate" onblur="bar(this)"/>

Javascript

function bar(txtBox) {
  if (txtBox == null) {
    return ''
  }

  var re = new RegExp(/(\d{6})(\d{2})?/);

  if (re.test(txtBox.value)) {
    if (txtBox.value.length == 8) {
      txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/' + txtBox.value.substring(4, 8)
    }
    if (txtBox.value.length == 7) {
      txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 3) + '/' + txtBox.value.substring(3, 8)
    }

    if (txtBox.value.length == 6) {
      if (txtBox.value.substring(4, 6) < 20) {
        txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/20' + txtBox.value.substring(4, 6);
      } else {
        txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/19' + txtBox.value.substring(4, 6);
      }
    }
  }
  return txtBox.value;
}

Answer 2

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 3

I spent some time working on the solution that Chris posted above and am accounting for everything except pasting, which isn't a requirement from the original poster as I read it.

//Bind keyup/keydown to the input
$('.date').bind('keyup', 'keydown', function(e) {
  //check for numerics
  var thisValue = $(this).val();
  thisValue = thisValue.replace(/[^0-9\//]/g, '');
  //get new value without letters
  $(this).val(thisValue);
  thisValue = $(this).val();
  var numChars = thisValue.length;
  $('#keyCount').html(numChars);
  var thisLen = thisValue.length - 1;
  var thisCharCode = thisValue.charCodeAt(thisLen);
  $('#keyP').html(thisCharCode);
  //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
  if (e.which !== 8) {
    if (numChars === 2) {
      if (thisCharCode == 47) {
        var thisV = '0' + thisValue;
        $(this).val(thisV);
      } else {
        thisValue += '/';
        $(this).val(thisValue);
      }
    }
    if (numChars === 5) {
      if (thisCharCode == 47) {
        var a = thisValue;
        var position = 3;
        var output = [a.slice(0, position), '0', a.slice(position)].join('');
        $(this).val(output);
      } else {
        thisValue += '/';
        $(this).val(thisValue);
      }
    }
    if (numChars > 10) {
      var output2 = thisValue.slice(0, 10);
      $(this).val(output2);
    }
  }
});
$('.date').blur(function() {
  var thisValue = $(this).val();
  var numChars = thisValue.length;
  if (numChars < 10) {
    $(this).addClass('brdErr');
    $('#dateErr1').slideDown('fast');
    $(this).select();
  } else {
    $(this).removeClass('brdErr');
    $('#dateErr1').hide();
  }
});

There is a lot added and a CSS class for an error message for invalid dates.

JSFiddle Here

Answer 4

<SCRIPT LANGUAGE="JavaScript">
    function addSlashes(f)
    {
        f.value = f.value.slice(0,2)+"/"+f.value.slice(2,4)+"/"+f.value.slice(4,7);
    }
</SCRIPT>

Answer 5

For react users, who want to perform the manipulation to the date before you sync it to the state, you can do this:

onChangeText={(text) => {
   // Format the value and remove slashes, so addItemEvery will work
   let value = text.replace(/\/+/g, "");
   // We substring to add / to only the first part, every two characters
   const firstFourChars = addItemEvery(value.substring(0, 5), "/", 2);
   value = firstFourChars + value.substring(5, value.length);


   ... e.g. update state
}

...

function addItemEvery(str, item, every) {
  for (let i = 0; i < str.length; i++) {
     if (!(i % (every + 1))) {
        str = str.substring(0, i) + item + str.substring(i);
     }
  }

  return str.substring(1);
}

Answer 6

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/