Kendo UI kendoMaskedTextBox 24-часовые часы

Question

Я пытаюсь создать замаскированное текстовое поле, в котором вы можете печатать не более 24:00, но я не могу сделать регулярное выражение зависимым друг от друга. Теперь я могу напечатать в экс. 25:00. Если первый символ 2, мне нужно только набрать < 5. Может кто-нибудь помочь?

$(".hoursBox").kendoMaskedTextBox({
    mask: "12:34",
    rules: {
        "1": /[0-2]/,
        "2": /[0-9]/,
        "3": /[0-5]/,
        "4": /[0-9]/
   }
});

Answer 1

Вы можете использовать приведенное ниже регулярное выражение для этого

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

Как это устроено

1. первая цифра должна быть любой из [0-1],
2. Вторая цифра должна быть любой вещью из [0-9],
3. Но первая и вторая цифры не могут быть '00', поэтому мы можем использовать отрицательный прогноз для проверки этого (?!00),
4. Третий символ должен быть двоеточием (:).
5. Четвертый символ должен быть любым из [0-5],
6. Пятый символ должен быть любым из [0-9],

Вы можете увидеть, как это соответствует здесь.

Answer 2

Я сделал это.

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