Flexible date filter in PrimeNG

I am creating a flexible filter based on a datePicker that allows users to select a specific date, a range, a month, or a year. This is my current work in progress. While it functions to some extent, I am not satisfied with its appearance.

My goal is to display a single input showing the current value, similar to other filters (for example, the amount column in the provided image). I attempted to add an input manually because, without it, only a button with a calendar icon is shown. However, the standalone input field appears different. Although I could invest time in CSS adjustments, I don't find that approach ideal.

The default input filter is displayed within the popover, meaning I end up with two inputs. Is there a way to maintain a standard filter look and feel while customizing the picker (for example, to allow switching between various input types)?

I believe that having multiple instances of the datePicker is not optimal—instead, I should have a single element that I customize on the fly. This issue stems from using tabs. Is there a better method to handle this switching functionality?



Here is a demo: https://stackblitz.com/edit/literak...-filter?file=src/app/grid/grid.component.html

<p-columnFilter field="settledAt" type="date" [matchModeOptions]="dateMatchModeOptions" [showClearButton]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<div class="datepicker-filter">
<input [(ngModel)]="displayDate" (click)="popover.toggle($event)" placeholder="Select date" readonly>
<p-popover #popover [dismissable]="true">
<p-tabView>
<p-tabPanel header="Single Day">
<p-datePicker [(ngModel)]="singleDate" dateFormat="mm/dd/yy" appendTo="body" (ngModelChange)="onSingleDateChange(filter, singleDate)"></p-datePicker>
</p-tabPanel>
<p-tabPanel header="Date Range">
<p-datePicker [(ngModel)]="rangeDates" selectionMode="range" dateFormat="mm/dd/yy" appendTo="body" (ngModelChange)="onDateRangeChange(filter, rangeDates)"></p-datePicker>
</p-tabPanel>
<p-tabPanel header="Month">
<p-datePicker [(ngModel)]="monthDate" view="month" dateFormat="MM yy" appendTo="body" (ngModelChange)="onMonthChange(filter, monthDate)"></p-datePicker>
</p-tabPanel>
<p-tabPanel header="Year">
<p-datePicker [(ngModel)]="yearDate" view="year" dateFormat="yy" appendTo="body" (ngModelChange)="onYearChange(filter, yearDate)"></p-datePicker>
</p-tabPanel>
</p-tabView>
</p-popover>
</div>
</ng-template>
</p-columnFilter>

Continue reading...