How do I make a masked input that only allows specific numers?

Question

I want to make a masked input that only accepts the following:

00-24:30 or 00

It's for a time of day box.

For example: 12:30 or 12:00

I have been using this component: https://github.com/insin/inputmask-core#pattern

But it will take any number if you use this pattern: 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>

What can I do?

score 1 · Answer 1 · answered Dec 08 '15 at 01:28

The doc is pretty clear that '1' accepts any number. It appears you have to create your own validators for each digit.

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) }
    }
  }
})

Which is plenty clumsy, to be honest. It also accepts 29:00, but I don't see a way to improve on that with that component.

How do I make a masked input that only allows specific numers?

1 Answers1