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

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<igx-select #dropdownConditions
        type="box"
        [displayDensity]="displayDensity"
        [placeholder]="conditionsPlaceholder"
        (selectionChanging)="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" [text]="getConditionFriendlyName(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 #picker *ngIf="column.dataType === 'date'"
    [weekStart]="column.pipeArgs.weekStart ?? weekStart"
    [(value)]="expressionUI.expression.searchVal"
    [locale]="grid.locale"
    [outlet]="grid.outlet"
    [displayDensity]="displayDensity"
    (click)="picker.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>
</igx-date-picker>

<igx-time-picker #picker *ngIf="column.dataType === 'time'"
    [inputFormat]="column.defaultTimeFormat"
    [(value)]="expressionUI.expression.searchVal"
    [locale]="grid.locale"
    [outlet]="grid.outlet"
    [displayDensity]="displayDensity"
    (click)="picker.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>

<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"
        (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"
        (click)="onLogicOperatorButtonClicked($event, 1)">
        {{ grid.resourceStrings.igx_grid_filter_operator_or }}
    </span>
</igx-buttongroup>

<div #overlayOutlet
     igxOverlayOutlet
     (pointerdown)="onOutletPointerDown($event)">
</div>