title: Auto slash(/) for date input using Javascript
body: <p>Auto slash(/) with leading and trailing space in a date value is working fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt;= 0 || num &gt; max) num = 1;
          str = num &gt; parseInt(max.toString().charAt(0)) 
                 &amp;&amp; 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 &amp;&amp; i &lt; 2 ? v + ' / ' : v;
        });
        this.value = output.join('').substr(0, 14);
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="date" /&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I tried to remove the space before and after slash(/).
  But when I deleting each character using backspace key, slash is not deleting.</p>
  
  <p>Below is what I tried.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt;= 0 || num &gt; max) num = 1;
          str = num &gt; parseInt(max.toString().charAt(0)) 
                 &amp;&amp; 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 - 1);
        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 &amp;&amp; i &lt; 2 ? v + '/' : v;
        });
        this.value = output.join('').substr(0, 10);
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="date" /&gt; 
  
  
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>Please suggest me to rectify this.</p>