fix: issue with ng-validation

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<DatePickerField> {
+    private _hasBeenOpened = false;
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
@@ -51,6 +54,20 @@ export class DatePickerValueAccessor extends BaseValueAccessor<DatePickerField>
         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<DatePickerField>
         "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<TimePickerField> {
+    private _hasBeenOpened = false;
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
@@ -81,6 +101,20 @@ export class TimePickerValueAccessor extends BaseValueAccessor<TimePickerField>
         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<TimePickerField>
         "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<DateTimePickerFields> {
+    private _hasBeenOpened = false;
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
@@ -111,4 +150,18 @@ export class DateTimePickersValueAccessor extends BaseValueAccessor<DateTimePick
         const normalized = super.normalizeValue(value);
         this.view.date = normalized;
     }
+
+    handleDateChange(args: any) {
+        if (this._hasBeenOpened) {
+            this.onChange(args.value);
+        }
+    }
+
+    handlePickerOpened(args: any) {
+        this._hasBeenOpened = true;
+    }
+
+    handlePickerClosed(args: any) {
+        this.onTouched();
+    }
 }

src/datetimepicker.android.ts

@@ -6,16 +6,7 @@ import {
     DatePickerOptions, TimePickerOptions, PickerOptions
 } from "./datetimepicker.common";
 
-interface DialogClickListener {
-    new(datePicker: any, dateTime: Date, callback: Function): android.content.DialogInterface.OnClickListener;
-}
-
-interface DialogDismissListener {
-    new(callback: Function): android.content.DialogInterface.OnDismissListener;
-}
-
-let DialogClickListener: DialogClickListener;
-let DialogDismissListener: DialogDismissListener;
+let DialogListener: any;
 let AppCompatNamespace: any;
 declare let global: any;
 
@@ -30,13 +21,14 @@ function initializeAppCompatNamespace(): void {
     }
 }
 
-function initializeDialogClickListener(): void {
-    if (DialogClickListener) {
+function initializeDialogListener(): void {
+    if (DialogListener) {
         return;
     }
 
-    @Interfaces([android.content.DialogInterface.OnClickListener])
-    class DialogClickListenerImpl extends java.lang.Object implements android.content.DialogInterface.OnClickListener {
+    @Interfaces([android.content.DialogInterface.OnClickListener, android.content.DialogInterface.OnDismissListener])
+    class DialogListenerImpl extends java.lang.Object implements android.content.DialogInterface.OnClickListener, android.content.DialogInterface.OnDismissListener {
+        private _isClicked = false;
         constructor(public nativePicker: any, public dateTime: Date, public callback: Function) {
             super();
             return global.__native(this);
@@ -46,6 +38,7 @@ function initializeDialogClickListener(): void {
             const callback = this.callback;
             const dateTime = this.dateTime;
             const nativePicker = this.nativePicker;
+            this._isClicked = true;
             switch (which) {
                 case android.content.DialogInterface.BUTTON_POSITIVE: {
                     if (nativePicker instanceof android.widget.DatePicker) {
@@ -63,30 +56,19 @@ function initializeDialogClickListener(): void {
             }
             callback(null);
         }
-    }
-
-    DialogClickListener = DialogClickListenerImpl;
-}
-
-function initializeDialogDismissListener(): void {
-    if (DialogDismissListener) {
-        return;
-    }
-
-    @Interfaces([android.content.DialogInterface.OnDismissListener])
-    class DialogDismissListenerImpl extends java.lang.Object implements android.content.DialogInterface.OnDismissListener {
-        constructor(public callback: Function) {
-            super();
-            return global.__native(this);
-        }
 
         onDismiss(dialog: android.content.DialogInterface) {
+            if (this._isClicked) {
+                // The Picker is dismissed due to a button click,
+                // so the callback is already called.
+                return;
+            }
             const callback = this.callback;
             callback(null);
         }
     }
 
-    DialogDismissListener = DialogDismissListenerImpl;
+    DialogListener = DialogListenerImpl;
 }
 
 export class DateTimePickerStyle extends DateTimePickerStyleBase {
@@ -167,8 +149,7 @@ export class DateTimePicker extends DateTimePickerBase {
     }
 
     static _createNativeDialog(nativePicker: android.view.View, options: PickerOptions, value: Date, callback: Function): android.app.AlertDialog.Builder {
-        initializeDialogClickListener();
-        initializeDialogDismissListener();
+        initializeDialogListener();
         initializeAppCompatNamespace();
         DateTimePicker._initializeTextResources(options.context);
         const context = options.context;
@@ -179,16 +160,15 @@ export class DateTimePicker extends DateTimePickerBase {
             dateTime = (nativePicker instanceof android.widget.DatePicker) ? getDateToday() : getDateNow();
         }
         const alertDialog = new android.app.AlertDialog.Builder(context);
-        const dialogClickListener = new DialogClickListener(nativePicker, dateTime, callback);
-        const dialogDismissListener = new DialogDismissListener(callback);
+        const dialogListener = new DialogListener(nativePicker, dateTime, callback);
         if (options.title) {
             alertDialog.setTitle(options.title);
         }
-        alertDialog.setOnDismissListener(dialogDismissListener);
+        alertDialog.setOnDismissListener(dialogListener);
         const cancelButtonText = options.cancelButtonText ? options.cancelButtonText : this._defaultCancelText;
         const okButtonText = options.okButtonText ? options.okButtonText : this._defaultOkText;
-        alertDialog.setNegativeButton(cancelButtonText, dialogClickListener);
-        alertDialog.setPositiveButton(okButtonText, dialogClickListener);
+        alertDialog.setNegativeButton(cancelButtonText, dialogListener);
+        alertDialog.setPositiveButton(okButtonText, dialogListener);
         alertDialog.setView(nativePicker);
         return alertDialog;
     }

src/ui/date-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 { DatePickerField as DatePickerFieldDefinition } from "./date-picker-field";
 import { LocalizationUtils } from "../utils/localization-utils";
-import { getDateToday } from "../utils/date-utils";
+import { getDateToday, dateComparer } from "../utils/date-utils";
 import { PickerFieldBase } from "./picker-field-base";
 
 @CSSType("DatePickerField")
@@ -12,6 +12,8 @@ export class DatePickerFieldBase extends PickerFieldBase implements DatePickerFi
     public date: Date;
     public dateFormat: string;
     public pickerDefaultDate: Date;
+    public static datePickerOpenedEvent = "datePickerOpened";
+    public static datePickerClosedEvent = "datePickerClosed";
 
     private _nativeLocale: any;
     private _nativeDateFormatter: any;
@@ -63,10 +65,20 @@ export class DatePickerFieldBase extends PickerFieldBase implements DatePickerFi
             if (result) {
                 this.date = result;
             }
+            let args = <EventData>{
+                eventName: DatePickerFieldBase.datePickerClosedEvent,
+                object: this
+            };
+            this.notify(args);
         })
         .catch((err) => {
             console.log('DatePickerField Error: ' + err);
         });
+        let args = <EventData>{
+            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);
 }

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);
 }

src/ui/time-picker-field.common.ts

@@ -1,22 +1,24 @@
-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")
 export class TimePickerFieldBase extends PickerFieldBase implements TimePickerFieldDefinition {
     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<TimePickerFieldBase, Date>({
         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<TimePickerFieldBase, Date>({
         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 = <EventData>{
+                    eventName: TimePickerFieldBase.timePickerClosedEvent,
+                    object: this
+                };
+                this.notify(args);
             })
             .catch((err) => {
                 console.log('TimePickerField Error: ' + err);
             });
+        let args = <EventData>{
+            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