Как сделать замаскированный ввод, который допускает только определенные цифры?

Question

Я хочу сделать маскированный ввод, который принимает только следующее:

00-24: 30 или 00

Это для времени суток.

Например: 12:30 или 12:00

Я использую этот компонент: https://github.com/insin/inputmask-core

Но это займет любое число, если вы используете этот шаблон: 11:11

        <MaskedInput value={this.props.time}
                     pattern={"11:11"}
                     maskPlaceholder={TIME_FORMAT}
                     placeholder={TIME_FORMAT}
                     onChange={this._onTimeChange}>
                     <Input type="text" className={InputClasses} />
        </MaskedInput>

Что я могу сделать?

Answer 1

В документе достаточно ясно, что "1" принимает любое число. Похоже, вы должны создать свои собственные валидаторы для каждой цифры.

var mask = new InputMask({
  pattern: '21:51', // An uppercase letter followed by 5 word characters
  formatCharacters: {
    '2': {
      validate: function(char) { return /[012]/.test(char) }
    },
    '5': {
      validate: function(char) { return /[0-5]/.test(char) }
    }
  }
})

Что довольно неуклюже, если честно. Он также принимает 29:00, но я не вижу способа улучшить это с помощью этого компонента.