0

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.

Sudipta Roy
  • 598
  • 1
  • 5
  • 24
  • @toto I am not sure, if the dupe-hammer is ok here. OPs regexp is correct, but it does not work as expected as the way the webcomponent deals with it. – cfrick Sep 24 '18 at 12:23
  • @cfrick: May be but OP could find usefull information about what is matched by his pattern in the dup. – Toto Sep 25 '18 at 09:18

1 Answers1

0

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].

Leif Åstrand
  • 4,265
  • 8
  • 14
  • Accepted. Just one thing, what will be the regex for 'hour' then? I have used `[0-9]|[0-2]?[0-3]`, but now I can not input 19(say). – Sudipta Roy Sep 24 '18 at 11:50
  • 1
    `\d|[01]\d|2[0-3]` - for single digit, or double digit where the first is zero or one, or double digit where the first is two the second is zero to four. Note the usage of `|` for OR. – VLAZ Sep 24 '18 at 11:56