refactor(date-editor): update events, display format for IE, spin methods

Author: jackofdiamond5

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -134,6 +134,10 @@ export abstract class DatePickerUtil {
     }
 
     public static getDefaultInputFormat(locale: string): string {
+        if (!Intl || !Intl.DateTimeFormat || !Intl.DateTimeFormat.prototype.formatToParts) {
+            // TODO: fallback with Intl.format for IE?
+            return DatePickerUtil.SHORT_DATE_MASK;
+        }
         const parts = DatePickerUtil.getDefaultLocaleMask(locale);
         parts.forEach(p => {
             if (p.type !== DatePart.Year && p.type !== DatePickerUtil.SEPARATOR) {
@@ -148,7 +152,7 @@ export abstract class DatePickerUtil {
         return DATE_CHARS.indexOf(char) !== -1 || TIME_CHARS.indexOf(char) !== -1;
     }
 
-    public static spinDate(delta: number, newDate: Date, isSpinLoop: boolean): Date {
+    public static spinDate(delta: number, newDate: Date, isSpinLoop: boolean): void {
         const maxDate = DatePickerUtil.daysInMonth(newDate.getFullYear(), newDate.getMonth());
         let date = newDate.getDate() + delta;
         if (date > maxDate) {
@@ -158,10 +162,9 @@ export abstract class DatePickerUtil {
         }
 
         newDate.setDate(date);
-        return newDate;
     }
 
-    public static spinMonth(delta: number, newDate: Date, isSpinLoop: boolean): Date {
+    public static spinMonth(delta: number, newDate: Date, isSpinLoop: boolean): void {
         const maxDate = DatePickerUtil.daysInMonth(newDate.getFullYear(), newDate.getMonth() + delta);
         if (newDate.getDate() > maxDate) {
             newDate.setDate(maxDate);
@@ -177,19 +180,17 @@ export abstract class DatePickerUtil {
         }
 
         newDate.setMonth(month);
-        return newDate;
     }
 
-    public static spinYear(delta: number, newDate: Date): Date {
+    public static spinYear(delta: number, newDate: Date): void {
         const maxDate = DatePickerUtil.daysInMonth(newDate.getFullYear() + delta, newDate.getMonth());
         if (newDate.getDate() > maxDate) {
             newDate.setDate(maxDate);
         }
         newDate.setFullYear(newDate.getFullYear() + delta);
-        return newDate;
     }
 
-    public static spinHours(delta: number, newDate: Date, isSpinLoop: boolean): Date {
+    public static spinHours(delta: number, newDate: Date, isSpinLoop: boolean): void {
         const maxHour = 23;
         const minHour = 0;
         let hours = newDate.getHours() + delta;
@@ -200,10 +201,9 @@ export abstract class DatePickerUtil {
         }
 
         newDate.setHours(hours);
-        return newDate;
     }
 
-    public static spinMinutes(delta: number, newDate: Date, isSpinLoop: boolean): Date {
+    public static spinMinutes(delta: number, newDate: Date, isSpinLoop: boolean): void {
         const maxMinutes = 59;
         const minMinutes = 0;
         let minutes = newDate.getMinutes() + delta;
@@ -214,10 +214,9 @@ export abstract class DatePickerUtil {
         }
 
         newDate.setMinutes(minutes);
-        return newDate;
     }
 
-    public static spinSeconds(delta: number, newDate: Date, isSpinLoop: boolean): Date {
+    public static spinSeconds(delta: number, newDate: Date, isSpinLoop: boolean): void {
         const maxSeconds = 59;
         const minSeconds = 0;
         let seconds = newDate.getSeconds() + delta;
@@ -228,10 +227,9 @@ export abstract class DatePickerUtil {
         }
 
         newDate.setSeconds(seconds);
-        return newDate;
     }
 
-    public static spinAmPm(newDate: Date, currentDate: Date, amPmFromMask: string) {
+    public static spinAmPm(newDate: Date, currentDate: Date, amPmFromMask: string): Date {
         switch (amPmFromMask) {
             case 'AM':
                 newDate = new Date(newDate.setHours(newDate.getHours() + 12));

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -64,8 +64,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   /**
    * Set the minimum possible value the editor will allow.
    *
-   * If a `string` value is passed in, it must be in the defined input format; if no input format is defined
-   * then the value's format must match the format based on the current locale.
+   * If a `string` value is passed in, it must be in the defined input format.
    *
    * @example
    * ```html
@@ -85,8 +84,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   /**
    * Set the maximum possible value the editor will allow.
    *
-   * If a `string` value is passed in, it must be in the defined input format; if no input format is defined
-   * then the value's format must match the format based on the current locale.
+   * If a `string` value is passed in, it must be in the defined input format.
    * @example
    * ```html
    * <input igxDateTimeEditor [maxValue]="maxDate">
@@ -164,11 +162,11 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
    * Emitted when the editor's value has changed.
    * @example
    * ```html
-   * <input igxDateTimeEditor (valueChanged)="onValueChanged($event)"/>
+   * <input igxDateTimeEditor (valueChange)="onValueChanged($event)"/>
    * ```
    */
   @Output()
-  public valueChange = new EventEmitter<IgxDateTimeEditorEventArgs>();
+  public valueChange = new EventEmitter<Date>();
 
   /**
    * Emitted when the editor is not within a specified range or when the editor's value is in an invalid state.
@@ -386,7 +384,12 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
       this.setSelectionRange(cursor);
     } else {
       const format = this.displayFormat || this.inputFormat;
-      this.inputValue = formatDate(this.value, format.replace('tt', 'aa'), this.locale);
+      if (format) {
+        this.inputValue = formatDate(this.value, format.replace('tt', 'aa'), this.locale);
+      } else {
+        // TODO: formatter function?
+        this.inputValue = this.value.toLocaleString();
+      }
     }
   }
 
@@ -412,22 +415,29 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     const newDate = new Date(this.value.getTime());
     switch (datePart) {
       case DatePart.Date:
-        return DatePickerUtil.spinDate(delta, newDate, this.isSpinLoop);
+        DatePickerUtil.spinDate(delta, newDate, this.isSpinLoop);
+        break;
       case DatePart.Month:
-        return DatePickerUtil.spinMonth(delta, newDate, this.isSpinLoop);
+        DatePickerUtil.spinMonth(delta, newDate, this.isSpinLoop);
+        break;
       case DatePart.Year:
-        return DatePickerUtil.spinYear(delta, newDate);
+        DatePickerUtil.spinYear(delta, newDate);
+        break;
       case DatePart.Hours:
-        return DatePickerUtil.spinHours(delta, newDate, this.isSpinLoop);
+        DatePickerUtil.spinHours(delta, newDate, this.isSpinLoop);
+        break;
       case DatePart.Minutes:
-        return DatePickerUtil.spinMinutes(delta, newDate, this.isSpinLoop);
+        DatePickerUtil.spinMinutes(delta, newDate, this.isSpinLoop);
+        break;
       case DatePart.Seconds:
-        return DatePickerUtil.spinSeconds(delta, newDate, this.isSpinLoop);
+        DatePickerUtil.spinSeconds(delta, newDate, this.isSpinLoop);
+        break;
       case DatePart.AmPm:
         const formatPart = this._inputDateParts.find(dp => dp.type === DatePart.AmPm);
         const amPmFromMask = this.inputValue.substring(formatPart.start, formatPart.end);
         return DatePickerUtil.spinAmPm(newDate, this.value, amPmFromMask);
     }
+    return newDate;
   }
 
   private updateValue(newDate: Date): void {
@@ -438,7 +448,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
       this.validationFailed.emit({ oldValue: this._oldValue, newValue: this.value, userInput: this.inputValue });
     }
     if (this.inputIsComplete() || this.inputValue === this.emptyMask) {
-      this.valueChange.emit({ oldValue: this._oldValue, newValue: this.value, userInput: this.inputValue });
+      this.valueChange.emit(this.value);
     }
   }