HTML input time with 24 hours format

by akmiecik

HTML

<div>
  <input type="number" min="0" max="2" placeholder="00">:
  <input type="number" min="0" max="60" placeholder="00">
</div>

CSS

div {
    background-color: white;
    display: inline-flex;
    border: 1px solid #ccc;
    color: #555;
  }
  
  input {
    border: none;
    color: #555;
    text-align: center;
    width: 60px;
  }

JavaScript

document.querySelectorAll('input[type=number]')
  .forEach(e => e.oninput = () => {
    // Always 2 digits
    if (e.value.length >= 2) e.value = e.value.slice(0, 2);
    // 0 on the left (doesn't work on FF)
    if (e.value.length === 1) e.value = '0' + e.value;
    // Avoiding letters on FF
    if (!e.value) e.value = '00';
  });