如何制作仅允许特定数字的屏蔽输入?

时间:2015-12-08 01:07:41

标签: javascript datetime reactjs maskedinput

我想制作一个只接受以下内容的屏蔽输入:

00-24:30或00

这是一天的时间。

例如: 12:30或12:00

我一直在使用这个组件: https://github.com/insin/inputmask-core#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>

我该怎么办?

1 个答案:

答案 0 :(得分: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,但我没有看到使用该组件改进的方法。

相关问题