From b0d9acf05ffcd10e5581dc8c7e5f02c61d7b8f8b Mon Sep 17 00:00:00 2001 From: tgpetrov Date: Fri, 17 May 2019 18:32:32 +0300 Subject: [PATCH] fix: issue with ng-validation --- .../nativescript-datetimepicker.accessors.ts | 59 ++++++++++++++++++- src/datetimepicker.android.ts | 56 ++++++------------ src/ui/date-picker-field.common.ts | 20 +++++-- src/ui/date-time-picker-fields.ts | 19 ++++-- src/ui/time-picker-field.common.ts | 24 +++++--- src/utils/date-utils.ts | 10 ++++ 6 files changed, 127 insertions(+), 61 deletions(-) diff --git a/src/angular/nativescript-datetimepicker.accessors.ts b/src/angular/nativescript-datetimepicker.accessors.ts index 66566c2..ae23f41 100644 --- a/src/angular/nativescript-datetimepicker.accessors.ts +++ b/src/angular/nativescript-datetimepicker.accessors.ts @@ -39,10 +39,13 @@ const DATE_TIME_PICKERS_VALUE_ACCESSOR = { "date-picker-field[ngModel],date-picker-field[formControlName],date-picker-field[formControl]", providers: [DATE_PICKER_VALUE_ACCESSOR], host: { - "(dateChange)": "onChange($event.value)", + "(dateChange)": "handleDateChange($event)", + "(datePickerOpened)": "handleDatePickerOpened($event)", + "(datePickerClosed)": "handleDatePickerClosed($event)" }, }) export class DatePickerValueAccessor extends BaseValueAccessor { + private _hasBeenOpened = false; constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -51,6 +54,20 @@ export class DatePickerValueAccessor extends BaseValueAccessor const normalized = super.normalizeValue(value); this.view.date = normalized; } + + handleDateChange(args: any) { + if (this._hasBeenOpened) { + this.onChange(args.value); + } + } + + handleDatePickerOpened(args: any) { + this._hasBeenOpened = true; + } + + handleDatePickerClosed(args: any) { + this.onTouched(); + } } /** @@ -69,10 +86,13 @@ export class DatePickerValueAccessor extends BaseValueAccessor "time-picker-field[ngModel],time-picker-field[formControlName],time-picker-field[formControl]", providers: [TIME_PICKER_VALUE_ACCESSOR], host: { - "(timeChange)": "onChange($event.value)", + "(timeChange)": "handleTimeChange($event)", + "(timePickerOpened)": "handleTimePickerOpened($event)", + "(timePickerClosed)": "handleTimePickerClosed($event)" }, }) export class TimePickerValueAccessor extends BaseValueAccessor { + private _hasBeenOpened = false; constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -81,6 +101,20 @@ export class TimePickerValueAccessor extends BaseValueAccessor const normalized = super.normalizeValue(value); this.view.time = normalized; } + + handleTimeChange(args: any) { + if (this._hasBeenOpened) { + this.onChange(args.value); + } + } + + handleTimePickerOpened(args: any) { + this._hasBeenOpened = true; + } + + handleTimePickerClosed(args: any) { + this.onTouched(); + } } /** @@ -99,10 +133,15 @@ export class TimePickerValueAccessor extends BaseValueAccessor "date-time-picker-fields[ngModel],date-time-picker-fields[formControlName],date-time-picker-fields[formControl]", providers: [DATE_TIME_PICKERS_VALUE_ACCESSOR], host: { - "(dateChange)": "onChange($event.value)", + "(dateChange)": "handleDateChange($event)", + "(datePickerOpened)": "handlePickerOpened($event)", + "(datePickerClosed)": "handlePickerClosed($event)", + "(timePickerOpened)": "handlePickerOpened($event)", + "(timePickerClosed)": "handlePickerClosed($event)" }, }) export class DateTimePickersValueAccessor extends BaseValueAccessor { + private _hasBeenOpened = false; constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -111,4 +150,18 @@ export class DateTimePickersValueAccessor extends BaseValueAccessor{ + eventName: DatePickerFieldBase.datePickerClosedEvent, + object: this + }; + this.notify(args); }) .catch((err) => { console.log('DatePickerField Error: ' + err); }); + let args = { + eventName: DatePickerFieldBase.datePickerOpenedEvent, + object: this + }; + this.notify(args); } public updateText() { @@ -112,10 +124,6 @@ export class DatePickerFieldBase extends PickerFieldBase implements DatePickerFi } } -export function dateComparer(x: Date, y: Date): boolean { - return x <= y && x >= y; -} - export function dateValueConverter(v: any): Date { return new Date(v); } diff --git a/src/ui/date-time-picker-fields.ts b/src/ui/date-time-picker-fields.ts index 99f232b..555d502 100644 --- a/src/ui/date-time-picker-fields.ts +++ b/src/ui/date-time-picker-fields.ts @@ -1,11 +1,11 @@ -import { Property, CSSType } from "tns-core-modules/ui/core/view"; +import { Property, CSSType, EventData } from "tns-core-modules/ui/core/view"; import { PropertyChangeData } from "tns-core-modules/data/observable"; import { DateTimePickerFields as DateTimePickerFieldsDefinition } from "./date-time-picker-fields"; import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout"; import { Orientation } from "tns-core-modules/ui/layouts/stack-layout"; import { DatePickerField } from "./date-picker-field"; import { TimePickerField } from "./time-picker-field"; -import { getDateNow, clearTime } from "../utils/date-utils"; +import { getDateNow, clearTime, dateComparer } from "../utils/date-utils"; @CSSType("DateTimePickerFields") export class DateTimePickerFields extends GridLayout implements DateTimePickerFieldsDefinition { @@ -241,6 +241,17 @@ export class DateTimePickerFields extends GridLayout implements DateTimePickerFi super.disposeNativeView(); } + public addEventListener(eventNames: string, callback: (data: EventData) => void, thisArg?: Object) { + super.addEventListener(eventNames, callback, thisArg); + this.dateField.addEventListener(eventNames, callback, thisArg); + this.timeField.addEventListener(eventNames, callback, thisArg); + } + public removeEventListener(eventNames: string, callback?: any, thisArg?: Object) { + super.removeEventListener(eventNames, callback, thisArg); + this.dateField.removeEventListener(eventNames, callback, thisArg); + this.timeField.removeEventListener(eventNames, callback, thisArg); + } + private _updateHandlers(subscribe: boolean) { if (subscribe) { this._dateChangeHandler = this._dateChangeHandler || ((args: PropertyChangeData) => { @@ -299,10 +310,6 @@ export class DateTimePickerFields extends GridLayout implements DateTimePickerFi } } -export function dateComparer(x: Date, y: Date): boolean { - return x <= y && x >= y; -} - export function dateValueConverter(v: any): Date { return new Date(v); } diff --git a/src/ui/time-picker-field.common.ts b/src/ui/time-picker-field.common.ts index b7a5806..838e592 100644 --- a/src/ui/time-picker-field.common.ts +++ b/src/ui/time-picker-field.common.ts @@ -1,8 +1,8 @@ -import { Property, CSSType } from "tns-core-modules/ui/core/view"; +import { Property, CSSType, EventData } from "tns-core-modules/ui/core/view"; import { DateTimePicker, DateTimePickerStyle } from "../datetimepicker"; import { TimePickerField as TimePickerFieldDefinition } from "./time-picker-field"; import { LocalizationUtils } from "../utils/localization-utils"; -import { getDateNow } from "../utils/date-utils"; +import { getDateNow, dateComparer } from "../utils/date-utils"; import { PickerFieldBase } from "./picker-field-base"; @CSSType("TimePickerField") @@ -10,13 +10,15 @@ export class TimePickerFieldBase extends PickerFieldBase implements TimePickerFi public time: Date; public timeFormat: string; public pickerDefaultTime: Date; + public static timePickerOpenedEvent = "timePickerOpened"; + public static timePickerClosedEvent = "timePickerClosed"; private _nativeLocale: any; private _nativeTimeFormatter: any; public static timeProperty = new Property({ name: "time", - equalityComparer: timeComparer, + equalityComparer: dateComparer, valueConverter: timeValueConverter, valueChanged: TimePickerFieldBase.timePropertyChanged }); @@ -29,7 +31,7 @@ export class TimePickerFieldBase extends PickerFieldBase implements TimePickerFi public static pickerDefaultTimeProperty = new Property({ name: "pickerDefaultTime", defaultValue: getDateNow(), - equalityComparer: timeComparer, + equalityComparer: dateComparer, valueConverter: timeValueConverter }); @@ -48,10 +50,20 @@ export class TimePickerFieldBase extends PickerFieldBase implements TimePickerFi if (result) { this.time = result; } + let args = { + eventName: TimePickerFieldBase.timePickerClosedEvent, + object: this + }; + this.notify(args); }) .catch((err) => { console.log('TimePickerField Error: ' + err); }); + let args = { + eventName: TimePickerFieldBase.timePickerOpenedEvent, + object: this + }; + this.notify(args); } public updateText() { @@ -101,10 +113,6 @@ export class TimePickerFieldBase extends PickerFieldBase implements TimePickerFi } } -export function timeComparer(x: Date, y: Date): boolean { - return x <= y && x >= y; -} - // Creates a date for today with the time represented in the timeString in ISO 8601 formats // as specified here: https://en.wikipedia.org/wiki/ISO_8601#Times: // 1)hh:mm:ss.sss --- 2)hhmmss.sss --- 3)hh:mm:ss --- 4)hhmmss --- 5)hh:mm --- 6)hhmm --- 7)hh diff --git a/src/utils/date-utils.ts b/src/utils/date-utils.ts index 0bdbc4f..7f29bd6 100644 --- a/src/utils/date-utils.ts +++ b/src/utils/date-utils.ts @@ -21,4 +21,14 @@ export function clearTime(date: Date): Date { date.setSeconds(0); date.setMilliseconds(0); return date; +} + +export function dateComparer(x: Date, y: Date): boolean { + if (x === undefined && y === undefined) { + return true; + } + if (x === null && y === null) { + return true; + } + return x <= y && x >= y; } \ No newline at end of file