<input onkeydown="onTimeInputKeyDown(this)" maxlength="5" type="text" />
<script>
function onTimeInputKeyDown(sender, e) {
    e = e || window.event;
    
    switch (e.keyCode) {
        case 8:   // backspace
        case 9:   // tab
        case 13:  // enter
        case 16:  // shift
        case 17:  // ctrl
        case 18:  // alt
        case 20:  // caps lock
        case 27:  // escape
        case 32:  // space
        case 35:  // end
        case 36:  // home
        case 37:  // left arrow
        case 39:  // right arrow
        case 45:  // insert
        case 46:  // delete
            return true;
    }
    
    if (e.keyCode > 8 && (e.keyCode < 48 || 57 < e.keyCode) && (e.keyCode < 96 || 105 < e.keyCode)) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }
    
    if (sender.value.length == 2) {
        sender.value += ':';
    }
    
    return true;
}
</script>

<input onkeydown="onTimeInputKeyDown(this)" maxlength="5" style="text-align:center;width:50px" type="text" />
<script>
function onTimeInputKeyDown(sender, e) {
    e = e || window.event;
    
    // Allow following key codes
    switch (e.keyCode) {
        case 8:   // backspace
        case 9:   // tab
        case 13:  // enter
        case 16:  // shift
        case 17:  // ctrl
        case 18:  // alt
        case 20:  // caps lock
        case 27:  // escape
        case 32:  // space
        case 35:  // end
        case 36:  // home
        case 37:  // left arrow
        case 39:  // right arrow
        case 45:  // insert
        case 46:  // delete
            return true;
    }
    
    // The first number in hours should be less than 3.
    if (sender.value.length == 0
    && (e.keyCode < 48 || 50 < e.keyCode) && (e.keyCode < 96 || 98 < e.keyCode)) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }
    
    // The second number in hours depends on the first. When the last one is 2 then it should be less than 4.
    if (sender.value.length == 1 && +sender.value == 2
    && (e.keyCode < 48 || 51 < e.keyCode) && (e.keyCode < 96 || 99 < e.keyCode)) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }
    
    // The first number in minutes should be less than 6.
    if (sender.value.length == 2
    && (e.keyCode < 48 || 55 < e.keyCode) && (e.keyCode < 96 || 101 < e.keyCode)) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }
    
    if (e.keyCode > 8 && (e.keyCode < 48 || 57 < e.keyCode) && (e.keyCode < 96 || 105 < e.keyCode)) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return false;
    }
    
    if (sender.value.length == 2) {
        sender.value += ':';
    }
    
    return true;
}
</script>

<input onkeydown="onTimeInputKeyDown(this)" maxlength="5" style="text-align:center;width:50px" type="text" />
<script>
function onTimeInputKeyDown(sender, e) {
    e = e || window.event;
    
    // Allow following key codes
    switch (e.keyCode) {
        case 8:   // backspace
        case 9:   // tab
        case 13:  // enter
        case 16:  // shift
        case 17:  // ctrl
        case 18:  // alt
        case 20:  // caps lock
        case 27:  // escape
        case 35:  // end
        case 36:  // home
        case 37:  // left arrow
        case 39:  // right arrow
        case 45:  // insert
        case 46:  // delete
            return true;
    }
    
    var start = sender.selectionStart;
    
    // The first number in hours should be less than 3.
    if (start === 0 && (e.keyCode < 48 || 50 < e.keyCode) && (e.keyCode < 96 || 98 < e.keyCode)) {
        e.preventDefault();
        return false;
    }
    
    // The second number in hours depends on the first. When the last one is 2 then it should be less than 4.
    if (start === 1 && +sender.value[0] === 2 && (e.keyCode < 48 || 51 < e.keyCode) && (e.keyCode < 96 || 99 < e.keyCode)) {
        e.preventDefault();
        return false;
    }
    
    // The first number in minutes should be less than 6.
    if ((start === 2 || start === 3) && (e.keyCode < 48 || 53 < e.keyCode) && (e.keyCode < 96 || 101 < e.keyCode)) {
        e.preventDefault();
        return false;
    }
    
    if ((e.keyCode < 48 || 57 < e.keyCode) && (e.keyCode < 96 || 105 < e.keyCode)) {
        e.preventDefault();
        return false;
    }
    
    if (sender.value.length === 2) {
        sender.value += ':';
    }
    
    return true;
}
</script>

<style>
  input.time {
    text-align: center;
    width: 50px;
  }
</style>
<label>From <input class="time" id="time_from" type="text" /></label>
<label> to <input class="time" id="time_to" type="text" /></label>
<script>
  (function (window) {
    function timeBox(elementId) {
      var element = document.getElementById(elementId);
        
      if (element) {
        element.addEventListener('keydown', onKeyDown);
      }
        
      function onKeyDown(e) {        
        e = e || window.event;
        var sender = e.target;
    
        // Allow following key codes
        switch (e.keyCode) {
          case 8:   // backspace
          case 9:   // tab
          case 13:  // enter
          case 16:  // shift
          case 17:  // ctrl
          case 18:  // alt
          case 20:  // caps lock
          case 27:  // escape
          case 35:  // end
          case 36:  // home
          case 37:  // left arrow
          case 39:  // right arrow
          case 45:  // insert
          case 46:  // delete
            return true;
        }
    
        // Suppress input if the symbol is not a valid number according it's position in HH:mm
        if (timeBox.outOfBound(e.keyCode, timeBox.maxByIndex(sender.selectionStart, sender.value))) {
          e.preventDefault();
          return false;
        }
    
        if (sender.value.length === 2) {
          sender.value += ':';
        }

        // Suppress input if the value reached the length of HH:mm
        if (sender.value.length === 'HH:mm'.length) {
          e.preventDefault();
          return false;
        }
    
        return true;
      }
    }
    
    timeBox.maxByIndex = function(index, value) {
      switch (index) {
        // The first number in hours should be less than 3.
        case 0:
          return 2;
        // The second number in hours depends on the first. When the last one is 2 then it should be less than 4.
        case 1:
          return +value[index - 1] === 2 ? 3 : 9;
        // The first number in minutes should be less than 6.
        case 2:
        case 3:
          return 5;
      }
    
      return 9;
    }

    timeBox.outOfBound = function(key, max) {
      return (key < 48 || 48 + max < key) && (key < 96 || 96 + max < key);
    }
    
    window.timeBox = timeBox;
  }(window));

  timeBox('time_from');
  timeBox('time_to');
</script>