Converting regular text input into DD/MM/YYYY format

Question

I can only use type="text" and I'm planning to get the format DD/MM/YYYY as the user types in the input field.

So far, I manage to get DD/MM/YY/Y. The year should be in YYYY format. How do I go about this?

$('[data-type="date"]').keyup(function() {
      var value = $(this).val();
      value = value.replace(/\D/g, "").split(/(?:([\d]{2}))/g).filter(s => s.length > 0).join("/");
      $(this).val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="date" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

Answer 1

You could try and use an external plugin for this. A quick search shows a few including this one.

Here's how it should work:

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" class="date">

Don't forget to validate the input, though.