import { formatDate } from '@angular/common' ; import { Component } from '@angular/core' ; import { DateTimePickerTimezone , timezones } from '@ux-aspects/ux-aspects' ; @ Component ( { selector : 'app-date-range-picker' , templateUrl : './date-range-picker.testpage.component.html' , styleUrls : [ './date-range-picker.testpage.component.less' ] , } ) export class DateRangePickerTestPageComponent { /** The date in the left side of the date range picker */ start = new Date ( 2019 , 2 , 4 ) ; /** The date in the right side of the date range picker */ end = new Date ( 2019 , 2 , 21 , 23 , 59 ) ; /** The formatted date string to display in the input */ date : string ; /** Earliest selectable date. */ min : Date ; /** Latest selectable date. */ max : Date ; /** Indicate whether or not the selected date is valid */ invalid : boolean = false ; /** Indicate if the time picker should be visible */ showTime : boolean = true ; /** Indicate if the timezone picker should be visible */ showTimezone : boolean = true ; /** Indicate if the seconds on the time picker should be visible */ showSeconds : boolean = false ; /** Indicate if the meridian on the time picker should be visible */ showMeridian : boolean = true ; /** Indicate if the spinners on the time picker should be visible */ showSpinners : boolean = true ; /** Indicate if the show now should be visible */ showNowBtn : boolean = false ; /** Time localization */ timeFormat : string ; /** Date localization */ dateFormat : string ; startTimezone : DateTimePickerTimezone ; endTimezone : DateTimePickerTimezone ; constructor ( ) { this . startTimezone = timezones . find ( timezone => timezone . offset === 0 ) ; this . endTimezone = this . startTimezone ; } /** Parse a date string when the input changes */ onDateChange ( date ) { this . invalid = false ; const parts = ( date . indexOf ( '—' ) ? date . split ( '—' ) : date . split ( '-' ) ) . map ( part => Date . parse ( part . trim ( ) ) ) ; if ( parts . length >= 1 && ! isNaN ( parts [ 0 ] ) ) { this . start = new Date ( parts [ 0 ] ) ; } else if ( parts . length >= 1 && isNaN ( parts [ 0 ] ) ) { this . invalid = true ; this . start = null ; } if ( parts . length === 2 && ! isNaN ( parts [ 1 ] ) ) { this . end = new Date ( parts [ 1 ] ) ; } else if ( parts . length === 2 && isNaN ( parts [ 1 ] ) ) { this . invalid = true ; this . end = null ; } if ( this . start && this . end && this . start . getTime ( ) > this . end . getTime ( ) ) { this . invalid = true ; this . start = null ; this . end = null ; } } /** Update the date string when the date range changes */ onRangeChange ( ) { const start = this . start ? formatDate ( this . start , 'd MMMM y  h:mm a' , 'en-US' , 'UTC' ) + ' ' + this . startTimezone . name : '' ; const end = this . end ? formatDate ( this . end , 'd MMMM y  h:mm a' , 'en-US' , 'UTC' ) + ' ' + this . endTimezone . name : '' ; if ( ! this . start || ! this . end ) { return ; } this . invalid = false ; if ( this . getNormalizedDate ( this . start , this . startTimezone ) . getTime ( ) > this . getNormalizedDate ( this . end , this . endTimezone ) . getTime ( ) ) { this . invalid = true ; } this . date = start && end ? `${ start } — ${ end }` : start || end ; } onTimezoneChange ( ) { this . onRangeChange ( ) ; } clear ( ) { this . start = null ; this . end = null ; this . date = null ; this . onRangeChange ( ) ; } enableMinAndMax ( ) { this . min = new Date ( 2019 , 2 , 5 ) ; this . max = new Date ( 2019 , 3 , 1 , 23 , 59 ) ; } disableMinAndMax ( ) { this . min = null ; this . max = null ; } addDateFormat ( ) { this . dateFormat = 'M/d/yy' ; } addTimeFormat ( ) { this . timeFormat = this . getTimeLocale ( this . start ) ; } getTimeLocale ( date ) { if ( date ) { return 'h:mm:ss a zzzz' ; } } /** Account for the timezone offset */ private getNormalizedDate ( date , timezone ) { const normalizedDate = new Date ( date ) ; normalizedDate . setMinutes ( normalizedDate . getMinutes ( ) + timezone . offset ) ; return normalizedDate ; } private getCurrentTimezone ( ) { return { ... timezones . find ( timezone => timezone . offset === new Date ( ) . getTimezoneOffset ( ) ) } ; } }