Как сделать автоформат даты в текстовом поле ввода с помощью JavaScript

Question

при вводе формата yyyyMMdd в текстовое поле, оно автоматически изменится на формат yyyy / MM / dd, например: если ваш тип 20180428, то изменится на 2018/04/28

Answer 1

Используя встроенные функции JavaScript, такие как parseInt, чтобы получить элемент ввода из строки в целое число, вы можете применять логику с вспомогательными функциями, чтобы получить желаемое форматирование даты.например, если значение дня больше 31, вместо этого по умолчанию возвращается 1, чтобы автоматически направлять пользователя на ввод дня, превышающего 31

MDN JavaScript parseInt ()

Впоследствиис помощью Regex вы можете манипулировать исходным вводом данных пользователя (ГГГГммДД) в формате, который вы хотите изменить на (ГГГГ / мм / ДД).

Regex

Я нашел интерактивное руководство, описывающее этот процесс ниже:

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

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

html {
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 400px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0 20px;
    border: 2px solid #ccc;
    width: 100%;
    color: #666;
    line-height: 3;
    border-radius: 7px;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
form small {
    color: #888;
    font-size: 1em;
    margin-top: 10px;
    display: block;
    align-self: ;
}

<form id="form" method="post" action="">
  <label for="amount">Date</label>
  <input type="text" id="date" />
  <small>Enter date as Month / Day / Year</small>
</form>