JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="container">
  <input class="day" id="day" type="number" />
  <input class="month" id="month" type="number" />
  <input class="year" id="year" type="number" />
</div>

<br>

CSS

.container {
  display: inline-block;
  position: relative;
}

#myinput {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-sizing: border-box;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.day,
.month,
.year {
  -webkit-appearance: none;
  border: solid 1px #aaa;
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 5px;
  padding-right: 5px;
  color: #777;
  border-radius: 4px;
  font-family: helvetica;
}

.day {
  width: 40px;
}

.month {
  width: 40px;
}

.year {
  width: 100px;
}

JavaScript

const validate = (max, next) => event => {
  const val = event.target.value;

  if (val.length > max) {
    event.target.value = val.substr(0, max);
    if (next) {
      next.focus();
    }

  }
}

day.addEventListener('input', validate(2, month));
month.addEventListener('input', validate(2, year));
year.addEventListener('input', validate(4));