Search code examples
javascriptregexvaadinweb-componentpolymer-2.x

vaadin text field regex pattern for hour and minute

I have two vaadin-text-field component in my app which is used for inputting hour(0-23) and minute(0-59). What will be the pattern for it?

<vaadin-text-field id="minute" style="width:40px" pattern="[0-5][0-9]" prevent-invalid-input>

The above example does not work, no input is accepted. I may be using the wrong regex. Can someone please tell me what is the right regex for hour and minute input?

Thanks.

Solution

  • The problem here is that prevent-invalid-input means that the user won't be able to type in e.g. 53 because they start by typing 5 which is not accepted by the pattern. To deal with that, you'd have to make the second digit optional, e.g. [0-5]?[0-9].