3

日付を含むいくつかのデータを表示する単純な TurboTable があります。

<p-table [value]="boxes" #dt>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th pSortableColumn="Number">
                Number
                <p-sortIcon field="Number"></p-sortIcon>
            </th>
            <th pSortableColumn="DateInserted">
                Interted at
                <p-sortIcon field="DateInserted"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th>
            <!-- Here is input to filter number -->
            </th>
            <th>
            <!-- Here I want to use Calendar component to select date range -->
            <p-calendar 
                [(ngModel)]="date"
                selectionMode="range"
                [readonlyInput]="true"
                dateFormat="dd.mm.yy"
                (onSelect)="onDateSelect($event)">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-box>
        <tr [pSelectableRow]="box">
            <td>{{box.Number}}</td>
            <td>{{box.DateInserted | date}}</td>
        </tr>
    </ng-template>
</p-table>

現在、Turbo Table は、フィルターで使用するいくつかの一致モード (「startsWith」、「contains」、「endsWith」、「equals」、および「in」) のみを提供しています。日付または日付範囲でフィルタリングするオプションはありますか?

カレンダー コンポーネントを使用して日付範囲を選択し、これらの日付でデータをフィルター処理したいと考えています。私は Date オブジェクトを使用しています (これは DatePipe を使用してテーブルに表示されます)。現在、これらの一致モードのいずれも、Date オブジェクトを正しく比較するオプションを提供していません。

回避策は、日付を文字列として保存することです。これにより、フィルタリングが機能します。しかし、日付を文字列に変換する際に問題が発生するため、これは完璧な解決策ではありません。また、日付形式はどこでも同じでなければなりません。TurboTable で日付範囲によるフィルタリングを実現するためのより良いオプションがあるのでしょうか?

4

4 に答える 4