Автоформатирование ввода даты

Question

с вводом даты в форме с немецким форматом даты (дд.мм.гггг).

Я хочу, чтобы пользователь не вводил точки.Я нашел CodePen-пример для английского формата (мм / дд / гггг), где слэши вводятся автоматически и менял его для моего случая.

В этом примере вы можете удалить с помощью backspace из последнего индекса допервый.В моей версии я могу удалить только с возвратом к следующей точке, затем мне нужно переместить курсор влево от точки и продолжить удаление.

Что я сделал не так?

JS, работающий на US-Date, в котором я работал:

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


date.addEventListener('blur', function(e) {
  this.type = 'text';
  var input = this.value;
  var values = input.split('/').map(function(v, i) {
    return v.replace(/\D/g, '')
  });
  var output = '';

  if (values.length == 3) {
    var year = values[2].length !== 4 ? parseInt(values[2]) + 2000 : parseInt(values[2]);
    var month = parseInt(values[0]) - 1;
    var day = parseInt(values[1]);
    var d = new Date(year, month, day);
    if (!isNaN(d)) {
      document.getElementById('result').innerText = d.toString();
      var dates = [d.getMonth() + 1, d.getDate(), d.getFullYear()];
      output = dates.map(function(v) {
      v = v.toString();
      return v.length == 1 ? '0' + v : v;
     }).join(' / ');
    };
  };
  this.value = output;
});

И это то, что я изменил:

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

                    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[0]) values[0] = checkValue(values[0], 31);
                        var output = values.map(function (v, i) {
                            return v.length == 2 && i < 2 ? v + '.' : v;
                        });
                        this.value = output.join('').substr(0, 10);
                    });

                    date.addEventListener('blur', function (e) {
                        this.type = 'text';
                        var input = this.value;
                        var values = input.split('.').map(function (v, i) {
                            return v.replace(/\D/g, '')
                        });
                        var output = '';

                        if (values.length == 3) {
                            var year = values[2].length !== 4 ? parseInt(values[2]) + 2000 : parseInt(values[2]);
                            var month = parseInt(values[1]) - 1;
                            var day = parseInt(values[0]);
                            var d = new Date(year, month, day);
                            if (!isNaN(d)) {
                                var dates = [d.getMonth() + 1, d.getDate(), d.getFullYear()];
                                output = dates.map(function (v) {
                                    v = v.toString();
                                    return v.length == 1 ? '0' + v : v;
                                }).join('.');
                            };
                        };
                        this.value = output;
                    });    

Точки вставляются автоматически по дням и месяцам.Но не удаляется автоматически при возврате, и курсор останавливается там.

Можете ли вы помочь?