feat(advancedFiltering): add filter template for time and dateTime columns #7678

Author: ddincheva

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

@@ -172,7 +172,7 @@ <h6 class="igx-filter-empty__title">
                     </igx-select-item>
                 </igx-select>
 
-                <igx-input-group *ngIf="!selectedColumn || selectedColumn.dataType !== 'date'"
+                <igx-input-group *ngIf="!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')"
                                  type="box"
                                  [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"
                                  [displayDensity]="'compact'">
@@ -208,6 +208,38 @@ <h6 class="igx-filter-empty__title">
                     </ng-template>
                 </igx-date-picker>
 
+                <igx-time-picker *ngIf="selectedColumn && selectedColumn.dataType === 'time'"
+                                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>
+
+                <igx-input-group #inputGroup type="box" *ngIf="selectedColumn && selectedColumn.dataType === 'dateTime'"
+                type="box" [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"
+                [displayDensity]="'compact'">
+                    <input #input igxInput tabindex="0"
+                        [placeholder]="grid.resourceStrings.igx_grid_filter_row_date_placeholder"
+                        [igxDateTimeEditor]="'dd/MM/yyyy HH:mm'"
+                        [(ngModel)]="searchValue"
+                        [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"/>
+                </igx-input-group>
+
                 <div class="igx-filter-tree__inputs-actions">
                     <button igxButton="icon"
                             [displayDensity]="displayDensity"