refactor(time-picker): fix time picker settings in grid templates #6482

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -116,8 +116,8 @@
             [style.width.%]="100"
             [outlet]="grid.outlet"
             mode="dropdown"
-            [format]="column.defaultTimeFormat"
-            [(ngModel)]="editValue"
+            [inputFormat]="column.defaultTimeFormat"
+            [(value)]="editValue"
             [igxFocus]="true"
             >
             <label igxLabel></label>

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -203,26 +203,22 @@ <h6 class="igx-filter-empty__title">
                     <igx-picker-clear></igx-picker-clear>
                 </igx-date-picker>
 
-                <igx-time-picker *ngIf="selectedColumn && selectedColumn.dataType === 'time'" [format]="selectedColumn.defaultTimeFormat"
-                                mode="dropdown" [(ngModel)]="searchValue" [outlet]="grid.outlet">
-                <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value">
-                    <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'">
-                        <input #searchValueInput
-                                igxInput
-                                tabindex="0"
-                                (keydown)="invokeClick($event)"
-                                (click)="openDialog(dropDownTarget.element.nativeElement)"
-                                [placeholder]="grid.resourceStrings.igx_grid_filter_row_time_placeholder"
-                                autocomplete="off"
-                                [value]="
-                                    selectedColumn.formatter
-                                    ? (value | columnFormatter:selectedColumn.formatter)
-                                    : (value | date:selectedColumn.pipeArgs.format:undefined:grid.locale)
-                                "
-                                [readonly]="true"
-                                [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"/>
-                    </igx-input-group>
-                </ng-template>
+                <igx-time-picker #timePicker *ngIf="selectedColumn && selectedColumn.dataType === 'time'"
+                    [inputFormat]="selectedColumn.defaultTimeFormat"
+                    [(value)]="searchValue"
+                    [formatter]="selectedColumn.formatter"
+                    [outlet]="grid.outlet"
+                    (click)="timePicker.open()"
+                    (keydown)="invokeClick($event)"
+                    [displayDensity]="'compact'"
+                    [placeholder]="grid.resourceStrings.igx_grid_filter_row_time_placeholder"
+                    type="box"
+                    [readOnly]="true"
+                    [disabled]="!selectedColumn || !selectedCondition ||
+                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)">
+                     <!-- disable default icons -->
+                     <igx-picker-toggle></igx-picker-toggle>
+                     <igx-picker-clear></igx-picker-clear>
                 </igx-time-picker>
 
                 <igx-input-group #inputGroup type="box" *ngIf="selectedColumn && selectedColumn.dataType === 'dateTime'"

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -74,42 +74,33 @@
 </ng-template>
 
 <ng-template #defaultTimeUI>
-    <igx-time-picker
-        tabindex="0"
-        mode="dropdown"
-        [value]="value"
-        [format]="column.defaultTimeFormat"
+    <igx-time-picker #timePicker
+        [(value)]="value"
+        [inputFormat]="column.defaultTimeFormat"
+        [formatter]="column.formatter"
         [outlet]="filteringService.grid.outlet"
-        (onValueChanged)="onDateSelected($event.newValue)"
-        (onClosed)="datePickerClose()">
-        <ng-template igxTimePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #inputGroup type="box" [displayDensity]="displayDensity" (focusout)="onInputGroupFocusout()">
-                <igx-prefix #inputGroupPrefix
-                            tabindex="0"
-                            (click)="inputGroupPrefixClick($event)"
-                            (keydown)="onPrefixKeyDown($event)"
-                            [igxDropDownItemNavigation]="inputGroupConditions">
-                    <igx-icon family="imx-icons" [name]="expression.condition.iconName"></igx-icon>
-                </igx-prefix>
-                <input #input
-                       igxInput
-                       tabindex="0"
-                       (click)="expression.condition.isUnary ? null : openDialog(inputGroup.element.nativeElement)"
-                       [placeholder]="placeholder"
-                       autocomplete="off"
-                       [value]="
-                            column.formatter
-                            ? (value | columnFormatter:column.formatter)
-                            : (value | date:column.pipeArgs.format:undefined:filteringService.grid.locale)
-                        "
-                       [readonly]="true"
-                       (keydown)="onInputKeyDown($event)"/>
-                <igx-suffix *ngIf="value">
-                    <igx-icon (keydown)="onCommitKeyDown($event)" (click)="onCommitClick()" tabindex="0">done</igx-icon>
-                    <igx-icon (keydown)="onClearKeyDown($event)" (click)="clearInput()" tabindex="0">clear</igx-icon>
-                </igx-suffix>
-            </igx-input-group>
-            </ng-template>
+        [displayDensity]="displayDensity"
+        type="box"
+        [readOnly]="true"
+        [placeholder]="placeholder"
+        (closed)="focusEditElement()"
+        (focusout)="onInputGroupFocusout()"
+        (keydown)="onInputKeyDown($event)"
+        (click)="expression.condition.isUnary ? null : timePicker.open()">
+        <igx-prefix #inputGroupPrefix
+        tabindex="0"
+        (click)="inputGroupPrefixClick($event)"
+        (keydown)="onPrefixKeyDown($event)"
+        [igxDropDownItemNavigation]="inputGroupConditions">
+        <igx-icon family="imx-icons" [name]="expression.condition.iconName"></igx-icon>
+    </igx-prefix>
+    <igx-suffix *ngIf="value">
+        <igx-icon tabindex="0" (keydown)="onCommitKeyDown($event)" (click)="onCommitClick($event)">done</igx-icon>
+        <igx-icon tabindex="0" (keydown)="onClearKeyDown($event)" (click)="clearInput($event)">clear</igx-icon>
+    </igx-suffix>
+    <!-- disable default icons -->
+    <igx-picker-toggle></igx-picker-toggle>
+    <igx-picker-clear></igx-picker-clear>
     </igx-time-picker>
 </ng-template>
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -1,56 +1,90 @@
-<igx-select #dropdownConditions type="box" [displayDensity]="displayDensity" [placeholder]="conditionsPlaceholder"
-    (onSelection)="onConditionsChanged($event)" [overlaySettings]="dropDownOverlaySettings">
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" family="imx-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-    <igx-select-item *ngFor="let condition of conditions" [value]="condition"
-        [selected]="isConditionSelected(condition)">
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
         <igx-icon family="imx-icons" [name]="getCondition(condition).iconName"></igx-icon>
         <span>{{translateCondition(condition)}}</span>
     </igx-select-item>
 </igx-select>
 
-<igx-date-picker #datePicker *ngIf="column.dataType === 'date'" [(value)]="expressionUI.expression.searchVal"
-    [locale]="grid.locale" [outlet]="grid.outlet" [displayDensity]="displayDensity" (click)="datePicker.open()"
-    [readOnly]="true" [placeholder]="inputDatePlaceholder" [displayFormat]="column.pipeArgs.format"
+<igx-date-picker #datePicker *ngIf="column.dataType === 'date'"
+    [(value)]="expressionUI.expression.searchVal"
+    [locale]="grid.locale"
+    [outlet]="grid.outlet"
+    [displayDensity]="displayDensity"
+    (click)="datePicker.open()"
+    [readOnly]="true"
+    [placeholder]="inputDatePlaceholder"
+    [displayFormat]="column.pipeArgs.format"
     [formatter]="column.formatter"
-    [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary" type="box">
-    <!-- disable default icons -->
-    <igx-picker-toggle></igx-picker-toggle>
-    <igx-picker-clear></igx-picker-clear>
+    [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
+    type="box">
+     <!-- disable default icons -->
+     <igx-picker-toggle></igx-picker-toggle>
+     <igx-picker-clear></igx-picker-clear>
 </igx-date-picker>
 
-<igx-time-picker #timePicker *ngIf="column.dataType === 'time'" [inputFormat]="column.defaultTimeFormat"
-    [(value)]="expressionUI.expression.searchVal" [outlet]="grid.outlet" [displayDensity]="displayDensity"
-    (click)="timePicker.open()" [readOnly]="true" [placeholder]="inputTimePlaceholder"
-    [displayFormat]="column.pipeArgs.format" [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary">
+<igx-time-picker #timePicker *ngIf="column.dataType === 'time'"
+    [inputFormat]="column.defaultTimeFormat"
+    [(value)]="expressionUI.expression.searchVal"
+    [outlet]="grid.outlet"
+    [displayDensity]="displayDensity"
+    (click)="timePicker.open()"
+    [readOnly]="true"
+    [placeholder]="inputTimePlaceholder"
+    [displayFormat]="column.pipeArgs.format"
+    [formatter]="column.formatter"
+    [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
+    type="box">
+     <!-- disable default icons -->
+     <igx-picker-toggle></igx-picker-toggle>
+     <igx-picker-clear></igx-picker-clear>
 </igx-time-picker>
 
-<igx-input-group #dropDownTarget *ngIf="column.dataType === 'dateTime'" #inputGroup type="box"
-    [displayDensity]="displayDensity">
-    <input #input igxInput tabindex="0" [placeholder]="inputDatePlaceholder"
-        [igxDateTimeEditor]="column.defaultDateTimeFormat" [(ngModel)]="expressionUI.expression.searchVal"
-        [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary" />
+<igx-input-group #dropDownTarget *ngIf="column.dataType === 'dateTime'" #inputGroup type="box" [displayDensity]="displayDensity">
+    <input #input igxInput tabindex="0"
+        [placeholder]="inputDatePlaceholder"
+        [igxDateTimeEditor]="column.defaultDateTimeFormat"
+        [(ngModel)]="expressionUI.expression.searchVal"
+        [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"/>
 </igx-input-group>
 
-<button (click)="onRemoveButtonClick()" igxButton="icon" [displayDensity]="displayDensity" *ngIf="!isSingle">
+<button (click)="onRemoveButtonClick()" igxButton="icon" [displayDensity]="displayDensity" *ngIf="!isSingle" >
     <igx-icon>cancel</igx-icon>
 </button>
 
-<igx-buttongroup #logicOperatorButtonGroup *ngIf="!isLast" [multiSelection]="false">
-    <span igxButton [displayDensity]="displayDensity" #andButton (keydown)="onLogicOperatorKeyDown($event, 0)"
-        tabindex="0" [selected]="expressionUI.afterOperator === 0" type="button"
+<igx-buttongroup #logicOperatorButtonGroup
+    *ngIf="!isLast"
+    [multiSelection]="false">
+    <span igxButton [displayDensity]="displayDensity"
+        #andButton
+        (keydown)="onLogicOperatorKeyDown($event, 0)"
+        tabindex="0"
+        [selected]="expressionUI.afterOperator === 0"
+        type="button"
         (click)="onLogicOperatorButtonClicked($event, 0)">
         {{ grid.resourceStrings.igx_grid_filter_operator_and }}
     </span>
 
-    <span igxButton [displayDensity]="displayDensity" #orButton tabindex="0"
-        (keydown)="onLogicOperatorKeyDown($event, 1)" [selected]="expressionUI.afterOperator === 1" type="button"
+    <span igxButton [displayDensity]="displayDensity"
+        #orButton
+        tabindex="0"
+        (keydown)="onLogicOperatorKeyDown($event, 1)"
+        [selected]="expressionUI.afterOperator === 1"
+        type="button"
         (click)="onLogicOperatorButtonClicked($event, 1)">
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
 
-<div #overlayOutlet igxOverlayOutlet (pointerdown)="onOutletPointerDown($event)">
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
 </div>

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -1,11 +1,11 @@
 <igx-input-group [displayDensity]="displayDensity" [type]="type" [suppressInputAutofocus]="this.isDropdown"
     (click)="!this.isDropdown && this.open()">
-    <input igxInput [igxDateTimeEditor]="this.inputFormat" type="text" [readonly]="!this.isDropdown || this.readOnly"
-        [minValue]="this.minValue" [maxValue]="this.maxValue" [locale]="this.locale" [spinDelta]="this.itemsDelta"
-        [spinLoop]="this.spinLoop" [placeholder]="this.placeholder" [disabled]="this.disabled"
-        [displayFormat]="this.displayFormat" [igxTextSelection]="this.isDropdown && !this.readOnly" role="combobox"
-        aria-haspopup="dialog" [attr.aria-expanded]="!this.toggleDirective.collapsed"
-        [attr.aria-labelledby]="this.label?.id" />
+    <input [displayValuePipe]="this.formatter ? displayValue : null" igxInput [igxDateTimeEditor]="this.inputFormat"
+        type="text" [readonly]="!this.isDropdown || this.readOnly" [minValue]="this.minValue" [maxValue]="this.maxValue"
+        [locale]="this.locale" [spinDelta]="this.itemsDelta" [spinLoop]="this.spinLoop" [placeholder]="this.placeholder"
+        [disabled]="this.disabled" [displayFormat]="this.displayFormat"
+        [igxTextSelection]="this.isDropdown && !this.readOnly" role="combobox" aria-haspopup="dialog"
+        [attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
 
     <igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
         <igx-icon>access_time</igx-icon>
@@ -17,16 +17,17 @@
     <ng-container ngProjectAs="igx-prefix">
         <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
     </ng-container>
+
+    <igx-suffix *ngIf="this.showClearButton" igxRipple (click)="this.clear()">
+        <igx-icon>clear</igx-icon>
+    </igx-suffix>
+
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-hint">
         <ng-content select="igx-hint,[igxHint]"></ng-content>
     </ng-container>
-
-    <igx-suffix *ngIf="this.showClearButton" igxRipple (click)="this.clear()">
-        <igx-icon>clear</igx-icon>
-    </igx-suffix>
 </igx-input-group>
 
 <ng-template #defaultTimePickerActions>
@@ -86,4 +87,4 @@ <h2 class="igx-time-picker__header-hour">
             *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions">
         </ng-container>
     </div>
-</div>
+</div>

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -17,6 +17,7 @@ import {
     Injectable,
     AfterViewInit,
     Injector,
+    PipeTransform,
     LOCALE_ID, Optional, ContentChildren, QueryList, OnChanges, SimpleChanges
 } from '@angular/core';
 import {
@@ -227,6 +228,17 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     @Input()
     public spinLoop = true;
 
+    /**
+     * Gets/Sets a custom formatter function on the selected or passed date.
+     *
+     * @example
+     * ```html
+     * <igx-time-picker [value]="date" [formatter]="formatter"></igx-time-picker>
+     * ```
+     */
+    @Input()
+    public formatter: (val: Date) => string;
+
     /**
      * Sets the orientation of the picker's header.
      *
@@ -458,6 +470,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     }
 
     /** @hidden @internal */
+    public displayValue: PipeTransform = { transform: (date: Date) => this.formatter(date) };
+
     private _value: Date | string;
     private _dateValue: Date;
     private _dateMinValue: Date;