Как при помощи регулярных выражений сделать инпут в формате даты MM/YY

Question

Можете подсказать, есть инпут необходимо сделать так чтобы в него можно было ввести 5 символов только в формате даты - MM/YY. Если первый символ M = 0, то второй соответственно будет 1-9; Если первый символ M = 1, то второй соответственно будет до 0 до 2. YY - от 0 до 99. Как это можно реализовать при помощи регулярных выражений?

<label for="clientInputDate">Expiration (mm/yy)</label>
<input type="cardnumber" id="clientInputDate" maxlength="5">

Моя попытка без регулярных:

  let inpValid = inp.value.split("")
     switch (inpValid[0]){
                case "0":{
                    if ( !parseInt(inpValid[1]) ) {
                        inp.value = inp.value.substring(0, 1)
                    } 
                    break;
                }
                case "1":{
                    if(inpValid[1] > 2 || inpValid[1] % 1 !== 0){
                        inp.value = inp.value.substring(0, 1)
                    }
                    break;
                }
                default:{
                    inp.value = inp.value.substring(0, 0)
                }
            }
            if(inpValid[2] !== "/"){
                inp.value = inp.value.substring(0, 2)
            }
            if(inpValid[3] % 1 !== 0){
                inp.value = inp.value.substring(0, 3)
            }
            if(inpValid[4] % 1 !== 0){
                inp.value = inp.value.substring(0, 4)
            }

Минус кода в его объёме и то что при вводе третьего символа, нужно именно ввести "/", а не заменять любой символ на "/", как хотелось бы.

Answer 1

Попробуйте это выражение: ^(0?[1-9]|1[0-2])\/(19|2[0-1])?\d{2}$

Единственный момент, что тут требование наличия / в строке.

Answer 2

Наверное как-то так

let temp = false;
clientInputDate.addEventListener('keydown', function(e) {
  temp = e.key == 'Backspace' ? true : false;
})

clientInputDate.addEventListener('input', function() {
  if (temp == true) return;
  let val = this.value.split('');

  val[0] = val[0] < 2 ? val[0] : 0;

  if (val.length > 1) val[1] = val[0] > 0 ? 2 : (val[1] == 0 ? 1 : val[1]);
  if (val.length > 1) val[2] = '/';

  val = val.join('');
  this.value = val;
})

<input type="text" maxlength="5" id="clientInputDate">

БЛОГ НА HUSL

Как при помощи регулярных выражений сделать инпут в формате даты MM/YY

Ответы (2 шт):