refactor(date-picker-util): move DEFAULT_INPUT_FORMAT to DatePickerUtil

- use DEFAULT_INPUT_FORMAT in date-time editor
- update sample

Author: jackofdiamond5

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

@@ -11,17 +11,13 @@ export const enum DateState {
     Invalid = 'invalid',
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum FormatDesc {
     Numeric = 'numeric',
     TwoDigits = '2-digit'
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum DateChars {
     YearChar = 'y',
     MonthChar = 'M',
@@ -31,19 +27,18 @@ const enum DateChars {
 const DATE_CHARS = ['h', 'H', 'm', 's', 'S', 't', 'T'];
 const TIME_CHARS = ['d', 'D', 'M', 'y', 'Y'];
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum DateParts {
     Day = 'day',
     Month = 'month',
     Year = 'year'
 }
 
-/**
- * @hidden
- */
+
+/** @hidden */
 export abstract class DatePickerUtil {
+    public static readonly DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
+    // TODO: this is the def mask for the date-picker, should remove it during refactoring
     private static readonly SHORT_DATE_MASK = 'MM/dd/yy';
     private static readonly SEPARATOR = 'literal';
     private static readonly NUMBER_OF_MONTHS = 12;
@@ -262,12 +257,12 @@ export abstract class DatePickerUtil {
 
         let _value = new Date(value.getTime());
         let _maxValue = new Date(maxValue.getTime());
-        if (includeTime) {
+        if (includeDate) {
             _value.setHours(0, 0, 0, 0);
             _maxValue.setHours(0, 0, 0, 0);
             return _value.getTime() > maxValue.getTime();
         }
-        if (includeDate) {
+        if (includeTime) {
             _value = new Date(0, 0, 0, _value.getHours(), _value.getMinutes(), _value.getSeconds());
             _maxValue = new Date(0, 0, 0, _maxValue.getHours(), _maxValue.getMinutes(), _maxValue.getSeconds());
             return _value.getTime() > _maxValue.getTime();
@@ -288,12 +283,12 @@ export abstract class DatePickerUtil {
 
         let _value = new Date(value.getTime());
         let _minValue = new Date(minValue.getTime());
-        if (includeTime) {
+        if (includeDate) {
             _value.setHours(0, 0, 0, 0);
             _minValue.setHours(0, 0, 0, 0);
             return _value.getTime() < _minValue.getTime();
         }
-        if (includeDate) {
+        if (includeTime) {
             _value = new Date(0, 0, 0, _value.getHours(), _value.getMinutes(), _value.getSeconds());
             _minValue = new Date(0, 0, 0, _minValue.getHours(), _minValue.getMinutes(), _minValue.getSeconds());
             return _value.getTime() > _minValue.getTime();

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -49,9 +49,6 @@ import { CurrentResourceStrings } from '../core/i18n/resources';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { DatePickerUtil } from '../date-picker/date-picker.utils';
 import { DateRangeType } from '../core/dates';
-import { TreeGridFilteringStrategy } from '../grids/tree-grid/tree-grid.filtering.pipe';
-
-const DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
 
 /**
  * Provides the ability to select a range of dates from a calendar UI or editable inputs.
@@ -385,9 +382,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             // TODO: use displayFormat - see how shortDate, longDate can be defined
             return this.inputFormat
                 ? `${this.inputFormat} - ${this.inputFormat}`
-                : `${DEFAULT_INPUT_FORMAT} - ${DEFAULT_INPUT_FORMAT}`;
+                : `${DatePickerUtil.DEFAULT_INPUT_FORMAT} - ${DatePickerUtil.DEFAULT_INPUT_FORMAT}`;
         } else {
-            return this.inputFormat || DEFAULT_INPUT_FORMAT;
+            return this.inputFormat || DatePickerUtil.DEFAULT_INPUT_FORMAT;
         }
     }
 
@@ -632,7 +629,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     /** @hidden @internal */
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes['locale']) {
-            this.inputFormat = DatePickerUtil.getDefaultInputFormat(this.locale || 'en') || DEFAULT_INPUT_FORMAT;
+            this.inputFormat = DatePickerUtil.getDefaultInputFormat(this.locale || 'en') || DatePickerUtil.DEFAULT_INPUT_FORMAT;
         }
     }
 

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

@@ -141,7 +141,8 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     if (value) {
       this._format = value;
     }
-    const mask = this.inputFormat?.replace(new RegExp(/(?=[^t])[\w]/, 'g'), '0');
+    const mask = (this.inputFormat || DatePickerUtil.DEFAULT_INPUT_FORMAT)
+      .replace(new RegExp(/(?=[^t])[\w]/, 'g'), '0');
     this.mask = mask.indexOf('tt') !== -1 ? mask.replace(new RegExp('tt', 'g'), 'LL') : mask;
   }
 

src/app/date-time-editor/date-time-editor.sample.html

@@ -15,8 +15,8 @@ <h5>DateTime editor in a form </h5>
         <form>
             <igx-input-group [supressInputAutofocus]="true" style="max-width: 300px;">
                 <input #dateEditor="igxDateTimeEditor" type="text" [(ngModel)]="date" #formControl="ngModel" name="form"
-                    igxInput (valueChanged)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)"
-                    [igxDateTimeEditor]="'dd/MM/yyyy'" [minValue]="minDate" [maxValue]="maxDate" required />
+                    igxInput (valueChange)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)"
+                    [igxDateTimeEditor]="'dd/MM/yyyy hh:mm'" [minValue]="minDate" [maxValue]="maxDate" required />
                 <igx-suffix>
                     <button igxRipple igxRippleCentered="true" igxButton="icon" (click)="dateEditor.increment()">
                         <igx-icon>expand_less</igx-icon>

src/app/date-time-editor/date-time-editor.sample.ts

@@ -11,7 +11,7 @@ export class DateTimeEditorSampleComponent {
   public date1 = new Date(2021, 3, 24);
   public format = 'dd/M/yyyy';
 
-  public minDate = new Date(2020, 2, 20);
+  public minDate = new Date(2020, 2, 20, 11, 15);
   public maxDate = new Date(2020, 2, 25);
 
   public onValueChanged(event: IgxDateTimeEditorEventArgs) {