import { AfterViewInit , Component , ElementRef , OnDestroy , ViewChild , ViewEncapsulation } from '@angular/core' ; import { DateTimePickerTimezone } from '@ux-aspects/ux-aspects' ; import { fromEvent , Subscription } from 'rxjs' ; import { debounceTime } from 'rxjs/operators' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] , encapsulation : ViewEncapsulation . None } ) export class AppComponent implements AfterViewInit , OnDestroy { @ ViewChild ( 'input' ) dateInput : ElementRef ; date : Date = new Date ( ) ; timezone : DateTimePickerTimezone = { name : 'GMT' , offset : 0 } ; showTime : boolean = true ; showTimezones : boolean = true ; showMeridians : boolean = true ; showSpinners : boolean = true ; subscription : Subscription ; ngAfterViewInit ( ) { this . subscription = fromEvent ( this . dateInput . nativeElement , 'input' ) . pipe ( debounceTime ( 500 ) ) . subscribe ( event => this . parse ( this . dateInput . nativeElement . value ) ) ; } ngOnDestroy ( ) { this . subscription . unsubscribe ( ) ; } parse ( value ) { const date = new Date ( value ) ; if ( ! isNaN ( date . getDate ( ) ) ) { this . date = date ; } } }