CODEWITHSUNDEEP
regexkendo-uikendo-maskedtextbox
Claus Nielsen
Claus Nielsen

Reputation: 15

Kendo UI kendoMaskedTextBox 24 Hour clock

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]/
   }
});

Upvotes: 1

Views: 1674

Answers (2)

Alex Kuturkin
Alex Kuturkin

Reputation: 21

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

Upvotes: 0

Kannan Mohan
Kannan Mohan

Reputation: 1850

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.

Upvotes: 2

Related Questions