1

I'm trying to create masked textbox, where you are able to type in maximum 24:00, but I can't make the regex dependent on each other. Now i'm able to type in ex. 25:00. If the first char is 2 I need only to be able to type in < 5. Can anyone help?

$(".hoursBox").kendoMaskedTextBox({
    mask: "12:34",
    rules: {
        "1": /[0-2]/,
        "2": /[0-9]/,
        "3": /[0-5]/,
        "4": /[0-9]/
   }
});
DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
Claus Nielsen
  • 15
  • 3
  • -I think- you would have to use $(id).keydown(TwentyFourHoursOnly) And within the function TwentyFourHoursOnly test for all the cases, using e,preventDefault() if it doesn't pass. – tony Mar 19 '15 at 16:02
  • I've got the same problem but I'm going to cheat and use Asp Mvc validation instead – tony Mar 19 '15 at 16:02

2 Answers2

2

You can use the below regex for this

((?!00)[0-1][0-9]|2[1-4]):[0-5][0-9]

How it works

  1. the first digit should be any of [0-1].
  2. Second digit should be any thing from [0-9].
  3. But the first and second digits cannot be '00' and so we can use negative look-ahead to test this (?!00).
  4. The third character should be a colon ( : ).
  5. The fourth character should be be any of [0-5].
  6. The fifth character should be any of [0-9].

You can see the how it matches here.

Kannan Mohan
  • 1,810
  • 12
  • 15
  • Thx, I can see the regex works perfect. But i can't get it to work with kendoMaskedTextBox. This does not work: $(".hoursBox").kendoMaskedTextBox({ mask: "00:00", rules: { "0": /((?!00)[0-1][0-9]|2[1-4]):[0-5][0-9]/ } }); – Claus Nielsen Feb 05 '15 at 12:40
  • This won't work with kendoMaskedTextBox, the rule just says whats allowed within the single digit, not the whole box. – tony Mar 19 '15 at 15:48
0

I did this.

<kendo-maskedtextbox
              [includeLiterals]="true"
              [formControl]="formGroup.get('duration')"
              mask="000d12h34m"
              [rules]="rules"
              (keydown)="onKey(formGroup.get('duration'))"
            >
            </kendo-maskedtextbox>


 public rules = {
    '1': /[0-2]/,
    '2': /[0-9]/,
    '3': /[0-5]/,
    '4': /[0-9]/,
  };

  public onKey(fg: FormControl) {
    setTimeout(() => {
      // check for hours > 23
      if (Number(fg.value?.split('d')[1].substring(0, 2)) > 23) {
        const value = fg.value.substring(0, 5) + ` ` + fg.value.substring(6);
        fg.setValue(value);
      }
    }, 200);
  }
Alex Kuturkin
  • 21
  • 1
  • 1
    Welcome to StackOverflow. Please consider adding a little details (i.e. how your code works or how did you solve a particular problem) when posting a snippet. – Iftieaq May 25 '21 at 10:16