How to add auto slash in date(2000-12-30) using pure javascript?

Question

I am trying to add auto slash in date field. I want the date format as yyyy/mm/dd

one keyup I want to add the slash automatically and after date(last number) it should not allow to type the number.

I want this function in pure javascript.

Here is my sample code.

var date = document.getElementById('date');
    

    function checkValue(str, max) {
      if (str.charAt(0) !== '0' || str == '00') {
        var num = parseInt(str);
        if (isNaN(num) || num <= 0 || num > max) num = 1;
        str = num > parseInt(max.toString().charAt(0)) 
               && num.toString().length == 1 ? '0' + num : num.toString();
      };
      return str;
    };


    date.addEventListener('input', function(e) 
    {
      this.type = 'text';
      var input = this.value;
      if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3);
      var values = input.split('/').map(function(v) {
        return v.replace(/\D/g, '')
      });
      if (values[0]) values[0] = checkValue(values[0], 12);
      if (values[1]) values[1] = checkValue(values[1], 31);
      var output = values.map(function(v, i) {
        return v.length == 2 && i < 2 ? v + ' / ' : v;
      });
      this.value = output.join('').substr(0, 14);
    });

<input type="text" id="date">

In the above code the date format is as mm/dd/yyyy. I want this to change it to yyyy/mm/dd.

In suggested question it is simply printing the date. I want it to be done during onkey up function

Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — VLAZ, Oct 29 '20 at 10:37
No it won't. I dont want to print the date in this format.While typing in input field itself it should automatically add slash — Jasmine Joseph, Oct 29 '20 at 10:39

score 1 · Accepted Answer · answered Oct 29 '20 at 11:01

Try like this:

var date = document.getElementById('date');


function checkValue(str, max) {
  if (str.charAt(0) !== '0' || str == '00') {
    var num = parseInt(str);
    if (isNaN(num) || num <= 0 || num > max) num = 1;
    str = num > parseInt(max.toString().charAt(0)) &&
      num.toString().length == 1 ? '0' + num : num.toString();
  };
  return str;
};


date.addEventListener('input', function(e) {
  this.type = 'text';
  var input = this.value;
  if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3);
  var values = input.split('/').map(function(v) {
    return v.replace(/\D/g, '')
  });
  if (values[1]) values[1] = checkValue(values[1], 12);
  if (values[2]) values[2] = checkValue(values[2], 31);

  var max = 4;
  var output = values.map(function(v, i) {
    if (v.length == max) {
      max = 2;
      return i < max ? v + ' / ' : v;
    };

    return v;
  });
  this.value = output.join('').substr(0, 14);
});

<input type="text" id="date">

When mapping the values to set the output, the first element should be checked against the length of yyyy (4) and the others against the length of mm or dd (2). Finally, the indexes of the values passed into checkValue need to be incremented.

How to add auto slash in date(2000-12-30) using pure javascript?

1 Answers1