diff --git a/src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts b/src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts index e84a60e9..0ea66333 100644 --- a/src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts +++ b/src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts @@ -4,8 +4,8 @@ import { ElementRef, EventEmitter, HostListener, - Input, - Output, + Input, OnChanges, + Output, SimpleChanges, ViewChild } from '@angular/core'; import {ClockFaceTime} from '../../models/clock-face-time.interface'; @@ -16,7 +16,7 @@ import {TimeUnit} from '../../models/time-unit.enum'; templateUrl: './ngx-material-timepicker-face.component.html', styleUrls: ['./ngx-material-timepicker-face.component.scss'] }) -export class NgxMaterialTimepickerFaceComponent implements AfterViewInit { +export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChanges { timeUnit = TimeUnit; @@ -35,6 +35,12 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit { this.setClockHandPosition(); } + ngOnChanges(changes: SimpleChanges) { + if (changes && changes['selectedTime'].currentValue) { + this.selectedTime = this.faceTime.find(time => time.time === changes['selectedTime'].currentValue.time); + } + } + @HostListener('touchstart', ['$event']) @HostListener('mousedown', ['$event']) onMousedown(e: MouseEvent | TouchEvent) { diff --git a/src/app/material-timepicker/directives/ngx-timepicker.directive.ts b/src/app/material-timepicker/directives/ngx-timepicker.directive.ts index f7b5bd7b..600666b2 100644 --- a/src/app/material-timepicker/directives/ngx-timepicker.directive.ts +++ b/src/app/material-timepicker/directives/ngx-timepicker.directive.ts @@ -4,6 +4,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import {Subscription} from 'rxjs'; import {TimeFormat} from '../models/time-format.enum'; import * as moment_ from 'moment'; +import {NgxMaterialTimepickerService} from '../services/ngx-material-timepicker.service'; //Workaround for error "Cannot call a namespace ('moment') const moment = moment_; @@ -13,8 +14,6 @@ const VALUE_ACCESSOR = { multi: true }; -const TWENTY_FOUR_HOUR_FORMAT = 24; - @Directive({ selector: '[ngxTimepicker]', providers: [VALUE_ACCESSOR], @@ -33,7 +32,15 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor, private onChange: (value: any) => void = () => { }; - constructor(private elementRef: ElementRef) { + constructor(private elementRef: ElementRef, + private timepickerService: NgxMaterialTimepickerService) { + } + + private _format: TimeFormat; + + @Input() + set format(value: number) { + this._format = value === 24 ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE; } private _value: string; @@ -45,14 +52,8 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor, set value(value: string) { this._value = formatTime(value, this._format); - this.elementRef.nativeElement.value = value ? formatTime(value, this._format) : '' - } - - private _format: TimeFormat; - - @Input() - set format(value: number) { - this._format = value === TWENTY_FOUR_HOUR_FORMAT ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE; + this.elementRef.nativeElement.value = value ? formatTime(value, this._format) : ''; + this.timepickerService.defaultTime = formatTime(value); } onTouched = () => { @@ -100,5 +101,5 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor, } function formatTime(time: string, format = TimeFormat.TWELVE): string { - return moment(time, 'hh:mm a').format(format); + return moment(time, format).format(format); } diff --git a/src/app/material-timepicker/services/ngx-material-timepicker.service.ts b/src/app/material-timepicker/services/ngx-material-timepicker.service.ts index c7cd625a..8fe88855 100644 --- a/src/app/material-timepicker/services/ngx-material-timepicker.service.ts +++ b/src/app/material-timepicker/services/ngx-material-timepicker.service.ts @@ -1,57 +1,65 @@ import {Injectable} from '@angular/core'; import {ClockFaceTime} from '../models/clock-face-time.interface'; -import {Observable, BehaviorSubject} from 'rxjs'; +import {BehaviorSubject, Observable} from 'rxjs'; import {TimePeriod} from '../models/time-period.enum'; +import * as moment from 'moment'; +import {TimeFormat} from '../models/time-format.enum'; const DEFAULT_HOUR: ClockFaceTime = { - time: 12, - angle: 360 + time: 12, + angle: 360 }; const DEFAULT_MINUTE: ClockFaceTime = { - time: '00', - angle: 360 + time: '00', + angle: 360 }; @Injectable() export class NgxMaterialTimepickerService { - private hourSubject = new BehaviorSubject(DEFAULT_HOUR); - private minuteSubject = new BehaviorSubject(DEFAULT_MINUTE); - private periodSubject = new BehaviorSubject(TimePeriod.AM); + private hourSubject = new BehaviorSubject(DEFAULT_HOUR); + private minuteSubject = new BehaviorSubject(DEFAULT_MINUTE); + private periodSubject = new BehaviorSubject(TimePeriod.AM); - constructor() { - } + set hour(hour: ClockFaceTime) { + this.hourSubject.next(hour); + } - set hour(hour: ClockFaceTime) { - this.hourSubject.next(hour); - } + get selectedHour(): Observable { + return this.hourSubject.asObservable(); + } - get selectedHour(): Observable { - return this.hourSubject.asObservable(); - } + set minute(minute: ClockFaceTime) { + this.minuteSubject.next(minute); + } - set minute(minute: ClockFaceTime) { - this.minuteSubject.next(minute); - } + get selectedMinute(): Observable { + return this.minuteSubject.asObservable(); + } - get selectedMinute(): Observable { - return this.minuteSubject.asObservable(); - } + set period(period: TimePeriod) { + this.periodSubject.next(period); + } - set period(period: TimePeriod) { - this.periodSubject.next(period); - } + get selectedPeriod(): Observable { + return this.periodSubject.asObservable(); + } - get selectedPeriod(): Observable { - return this.periodSubject.asObservable(); - } + get fullTime(): string { + const hour = this.hourSubject.getValue().time; + const minute = this.minuteSubject.getValue().time; + const period = this.periodSubject.getValue(); - get fullTime(): string { - const hour = this.hourSubject.getValue().time; - const minute = this.minuteSubject.getValue().time; - const period = this.periodSubject.getValue(); + return `${hour}:${minute} ${period}`; + } - return `${hour}:${minute} ${period}`; - } + set defaultTime(time: string) { + const defaultTime = moment(time, TimeFormat.TWENTY_FOUR).toDate(); + if (moment(defaultTime).isValid()) { + this.hour = {...DEFAULT_HOUR, time: defaultTime.getHours()}; + this.minute = {...DEFAULT_MINUTE, time: defaultTime.getMinutes() === 0 ? '00' : defaultTime.getMinutes()}; + this.period = time.substr(time.length - 2).toUpperCase(); + } + } }