feat(timepicker): input filter to accept only numbers

ng-bootstrap · Jun 21, 2019 · de8ffd6 · de8ffd6
1 parent 7a17683
commit de8ffd6
Showing 1 changed file with 34 additions and 4 deletions.
diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -37,10 +37,12 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="chevron ngb-tp-chevron"></span>
             <span class="sr-only" i18n="@@ngb.timepicker.increment-hours">Increment hours</span>
           </button>
-          <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
-            maxlength="2" placeholder="HH" i18n-placeholder="@@ngb.timepicker.HH"
+          <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize"
+            [class.form-control-lg]="isLargeSize"
+            maxlength="2" inputmode="numeric" placeholder="HH" i18n-placeholder="@@ngb.timepicker.HH"
             [value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Hours" i18n-aria-label="@@ngb.timepicker.hours"
+            (keydown)="_filter($event)"
             (keydown.ArrowUp)="changeHour(hourStep); $event.preventDefault()"
             (keydown.ArrowDown)="changeHour(-hourStep); $event.preventDefault()">
           <button *ngIf="spinners" tabindex="-1" type="button" (click)="changeHour(-hourStep)"
@@ -59,9 +61,10 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="sr-only" i18n="@@ngb.timepicker.increment-minutes">Increment minutes</span>
           </button>
           <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
-            maxlength="2" placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
+            maxlength="2" inputmode="numeric" placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
             [value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Minutes" i18n-aria-label="@@ngb.timepicker.minutes"
+            (keydown)="_filter($event)"
             (keydown.ArrowUp)="changeMinute(minuteStep); $event.preventDefault()"
             (keydown.ArrowDown)="changeMinute(-minuteStep); $event.preventDefault()">
           <button *ngIf="spinners" tabindex="-1" type="button" (click)="changeMinute(-minuteStep)"
@@ -80,9 +83,10 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
             <span class="sr-only" i18n="@@ngb.timepicker.increment-seconds">Increment seconds</span>
           </button>
           <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
-            maxlength="2" placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
+            maxlength="2" inputmode="numeric" placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
             [value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)"
             [readOnly]="readonlyInputs" [disabled]="disabled" aria-label="Seconds" i18n-aria-label="@@ngb.timepicker.seconds"
+            (keydown)="_filter($event)"
             (keydown.ArrowUp)="changeSecond(secondStep); $event.preventDefault()"
             (keydown.ArrowDown)="changeSecond(-secondStep); $event.preventDefault()">
           <button *ngIf="spinners" tabindex="-1" type="button" (click)="changeSecond(-secondStep)"
@@ -269,6 +273,32 @@ export class NgbTimepicker implements ControlValueAccessor,
     }
   }
 
+  _filter(e: KeyboardEvent) {
+    // tslint:disable-next-line
+    const keyCode = e.keyCode;
+    const ctrlKey = e.ctrlKey;
+    const metaKey = e.metaKey;
+    const shiftKey = e.shiftKey;
+    if (
+        // Allow: Delete, Backspace, Tab, Escape, Enter
+        [46, 8, 9, 27, 13].indexOf(keyCode) !== -1 || (keyCode === 65 && ctrlKey === true) ||  // Allow: Ctrl+A
+        (keyCode === 67 && ctrlKey === true) ||                                                // Allow: Ctrl+C
+        (keyCode === 86 && ctrlKey === true) ||                                                // Allow: Ctrl+V
+        (keyCode === 88 && ctrlKey === true) ||                                                // Allow: Ctrl+X
+        (keyCode === 65 && metaKey === true) ||                                                // Cmd+A (Mac)
+        (keyCode === 67 && metaKey === true) ||                                                // Cmd+C (Mac)
+        (keyCode === 86 && metaKey === true) ||                                                // Cmd+V (Mac)
+        (keyCode === 88 && metaKey === true) ||                                                // Cmd+X (Mac)
+        (keyCode >= 35 && keyCode <= 39)                                                       // Home, End, Left, Right
+        ) {
+      return;  // let it happen, don't do anything
+    }
+    // Ensure that it is a number and stop the keypress
+    if ((shiftKey || keyCode < 48 || keyCode > 57) && (keyCode < 96 || keyCode > 105)) {
+      e.preventDefault();
+    }
+  }
+
   private propagateModelChange(touched = true) {
     if (touched) {
       this.onTouched();