Added directiva for validate time input

projects/picker/src/lib/date-time/date-time.module.ts

@@ -1,3 +1,4 @@
+import { FormsModule } from '@angular/forms';
 /**
  * date-time.module
  */
@@ -7,7 +8,10 @@ import { CommonModule } from '@angular/common';
 import { A11yModule } from '@angular/cdk/a11y';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { OwlDateTimeTriggerDirective } from './date-time-picker-trigger.directive';
-import { OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER, OwlDateTimeComponent } from './date-time-picker.component';
+import {
+    OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER,
+    OwlDateTimeComponent,
+} from './date-time-picker.component';
 import { OwlDateTimeContainerComponent } from './date-time-picker-container.component';
 import { OwlDateTimeInputDirective } from './date-time-picker-input.directive';
 import { OwlDateTimeIntl } from './date-time-picker-intl.service';
@@ -21,9 +25,16 @@ import { NumberFixedLenPipe } from './numberedFixLen.pipe';
 import { OwlCalendarComponent } from './calendar.component';
 import { OwlDateTimeInlineComponent } from './date-time-inline.component';
 import { OwlDialogModule } from '../dialog/dialog.module';
+import { NumberValidatorDirective } from './number-validator.directive';
 
 @NgModule({
-    imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
+    imports: [
+        CommonModule,
+        OverlayModule,
+        OwlDialogModule,
+        A11yModule,
+        FormsModule,
+    ],
     exports: [
         OwlCalendarComponent,
         OwlTimerComponent,
@@ -49,14 +60,9 @@ import { OwlDialogModule } from '../dialog/dialog.module';
         OwlCalendarBodyComponent,
         NumberFixedLenPipe,
         OwlDateTimeInlineComponent,
+        NumberValidatorDirective,
     ],
-    providers: [
-        OwlDateTimeIntl,
-        OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER,
-    ],
-    entryComponents: [
-        OwlDateTimeContainerComponent,
-    ]
+    providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER],
+    entryComponents: [OwlDateTimeContainerComponent],
 })
-export class OwlDateTimeModule {
-}
+export class OwlDateTimeModule {}

projects/picker/src/lib/date-time/number-validator.directive.spec.ts

@@ -0,0 +1,51 @@
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { NumberValidatorDirective } from './number-validator.directive';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { OwlTimerBoxComponent } from './timer-box.component';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { ElementRef } from '@angular/core';
+export class MockElementRef extends ElementRef {}
+
+fdescribe('PhoneNumberValidatorDirective', () => {
+    let fixture: ComponentFixture<OwlTimerBoxComponent>;
+    let testComponent: OwlTimerBoxComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                NumberValidatorDirective,
+                ReactiveFormsModule,
+            ],
+            declarations: [NumberValidatorDirective, OwlTimerBoxComponent],
+        });
+
+        TestBed.overrideModule(BrowserDynamicTestingModule, {
+            set: {
+                entryComponents: [OwlTimerBoxComponent],
+            },
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(OwlTimerBoxComponent);
+        fixture.detectChanges();
+        testComponent = fixture.componentInstance;
+    }));
+
+    fit('should set zeros', () => {
+        const compiled = fixture.debugElement.nativeElement;
+        const input = compiled.querySelector('input');
+        testComponent.maxNumber = 23;
+        testComponent.inputField = '55';
+        fixture.detectChanges();
+        expect(input.value).toEqual('00');
+    });
+
+    fit('should remove invalid character', () => {
+        const compiled = fixture.debugElement.nativeElement;
+        const input = compiled.querySelector('input');
+        testComponent.maxNumber = 23;
+        testComponent.inputField = '2b';
+        fixture.detectChanges();
+        expect(input.value).toEqual('2');
+    });
+});

projects/picker/src/lib/date-time/number-validator.directive.ts

@@ -0,0 +1,42 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+    OnInit,
+    Input,
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+    selector: '[numberValidator]',
+})
+export class NumberValidatorDirective implements OnInit {
+    private regex = new RegExp(/^([0-9])+$/i);
+    @Input() maxNumber: number;
+    constructor(private el: ElementRef, private control: NgControl) {}
+
+    ngOnInit(): void {
+        (this.control.control as any).nativeElement = this.el.nativeElement;
+    }
+
+    @HostListener('input', ['$event']) onKeyPress(event: any) {
+        this.validator();
+    }
+
+    @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
+        setTimeout(() => {
+            this.validator();
+            event.preventDefault();
+        }, 100);
+    }
+
+    validator() {
+        let value = this.el.nativeElement.value;
+        const res = this.regex.test(value);
+        if (value && !res) {
+            this.control.control.setValue(value.substring(0, value.length - 1));
+        } else if (res && parseInt(value) > this.maxNumber) {
+            this.control.control.setValue('00');
+        }
+    }
+}

projects/picker/src/lib/date-time/timer-box.component.html

@@ -1,43 +1,76 @@
 <div *ngIf="showDivider" class="owl-dt-timer-divider" aria-hidden="true"></div>
-<button class="owl-dt-control-button owl-dt-control-arrow-button"
-        type="button" tabindex="-1"
-        [disabled]="upBtnDisabled"
-        [attr.aria-label]="upBtnAriaLabel"
-        (click)="upBtnClicked()">
+<button
+    class="owl-dt-control-button owl-dt-control-arrow-button"
+    type="button"
+    tabindex="-1"
+    [disabled]="upBtnDisabled"
+    [attr.aria-label]="upBtnAriaLabel"
+    (click)="upBtnClicked()"
+>
     <span class="owl-dt-control-button-content" tabindex="-1">
         <!-- <editor-fold desc="SVG Arrow Up"> -->
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 version="1.1" x="0px" y="0px" viewBox="0 0 451.847 451.846"
-                 style="enable-background:new 0 0 451.847 451.846;" xml:space="preserve"
-                 width="100%" height="100%">
-                    <path d="M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            version="1.1"
+            x="0px"
+            y="0px"
+            viewBox="0 0 451.847 451.846"
+            style="enable-background: new 0 0 451.847 451.846"
+            xml:space="preserve"
+            width="100%"
+            height="100%"
+        >
+            <path
+                d="M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0
                         L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4
-                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z"/>
-                </svg>
+                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z"
+            />
+        </svg>
         <!-- </editor-fold> -->
     </span>
 </button>
 <label class="owl-dt-timer-content">
-    <input class="owl-dt-timer-input" maxlength="2"
-           [value]="displayValue | numberFixedLen : 2"
-           (input)="handleInputChange(valueInput.value)" #valueInput>
-    <span class="owl-hidden-accessible">{{inputLabel}}</span>
+    <input
+        [(ngModel)]="inputField"
+        numberValidator
+        [maxNumber]="maxNumber"
+        class="owl-dt-timer-input"
+        maxlength="2"
+        [value]="displayValue | numberFixedLen: 2"
+        (input)="handleInputChange(valueInput.value)"
+        #valueInput
+    />
+    <span class="owl-hidden-accessible">{{ inputLabel }}</span>
 </label>
-<button class="owl-dt-control-button owl-dt-control-arrow-button"
-        type="button" tabindex="-1"
-        [disabled]="downBtnDisabled"
-        [attr.aria-label]="downBtnAriaLabel"
-        (click)="downBtnClicked()">
+<button
+    class="owl-dt-control-button owl-dt-control-arrow-button"
+    type="button"
+    tabindex="-1"
+    [disabled]="downBtnDisabled"
+    [attr.aria-label]="downBtnAriaLabel"
+    (click)="downBtnClicked()"
+>
     <span class="owl-dt-control-button-content" tabindex="-1">
         <!-- <editor-fold desc="SVG Arrow Down"> -->
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 version="1.1" x="0px" y="0px" viewBox="0 0 451.847 451.846"
-                 style="enable-background:new 0 0 451.847 451.846;" xml:space="preserve"
-                 width="100%" height="100%">
-                    <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            version="1.1"
+            x="0px"
+            y="0px"
+            viewBox="0 0 451.847 451.846"
+            style="enable-background: new 0 0 451.847 451.846"
+            xml:space="preserve"
+            width="100%"
+            height="100%"
+        >
+            <path
+                d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
                         c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
-                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
-                </svg>
+                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
+            />
+        </svg>
         <!-- </editor-fold> -->
     </span>
 </button>

projects/picker/src/lib/date-time/timer-box.component.ts

@@ -9,7 +9,7 @@ import {
     Input,
     OnDestroy,
     OnInit,
-    Output
+    Output,
 } from '@angular/core';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subject, Subscription } from 'rxjs';
@@ -23,11 +23,13 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
     preserveWhitespaces: false,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
-    }
+        '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass',
+    },
 })
-
 export class OwlTimerBoxComponent implements OnInit, OnDestroy {
+    inputField: string = '';
+
+    @Input() maxNumber: number = 60;
 
     @Input() showDivider = false;
 
@@ -71,19 +73,17 @@ export class OwlTimerBoxComponent implements OnInit, OnDestroy {
         return true;
     }
 
-    constructor() {
-    }
+    constructor() {}
 
     public ngOnInit() {
-        this.inputStreamSub = this.inputStream.pipe(
-            debounceTime(500),
-            distinctUntilChanged()
-        ).subscribe(( val: string ) => {
-            if (val) {
-                const inputValue = coerceNumberProperty(val, 0);
-                this.updateValueViaInput(inputValue);
-            }
-        })
+        this.inputStreamSub = this.inputStream
+            .pipe(debounceTime(500), distinctUntilChanged())
+            .subscribe((val: string) => {
+                if (val) {
+                    const inputValue = coerceNumberProperty(val, 0);
+                    this.updateValueViaInput(inputValue);
+                }
+            });
     }
 
     public ngOnDestroy(): void {
@@ -98,15 +98,15 @@ export class OwlTimerBoxComponent implements OnInit, OnDestroy {
         this.updateValue(this.value - this.step);
     }
 
-    public handleInputChange( val: string ): void {
+    public handleInputChange(val: string): void {
         this.inputStream.next(val);
     }
 
-    private updateValue( value: number ): void {
+    private updateValue(value: number): void {
         this.valueChange.emit(value);
     }
 
-    private updateValueViaInput( value: number ): void {
+    private updateValueViaInput(value: number): void {
         if (value > this.max || value < this.min) {
             return;
         }