frontend/src/app/components/editor/database/filters/date-time.filter.ts

import { Component } from '@angular/core';

@Component({
    selector: 'noded-date-time-filter',
    template: `
        <ion-datetime
            [displayFormat]="displayFormat"
            class="ag-custom-component-popup"
            [(ngModel)]="stringValue"
            (ionChange)="onDateChanged()"
        ></ion-datetime>
    `,
    styles: [
        `
            ion-datetime {
                border: 2px solid darkgrey;
                border-radius: 3px;
                margin: 3px;
            }
        `
    ],
})
export class DateTimeFilterComponent {
    private params: any;
    public displayFormat = 'YYYY-MM-DD h:mm a';

    public stringValue = '';

    public get dateValue() {
        return new Date(this.stringValue);
    }

    public set dateValue(date: Date) {
        this.stringValue = date.toISOString();
    }

    agInit(params: any): void {
        this.params = params;
        this.displayFormat = params?.filterParams?.displayFormat || 'YYYY-MM-DD h:mm a';
    }

    onDateChanged() {
        this.params.onDateChanged();
    }

    getDate(): Date {
        return this.dateValue;
    }

    setDate(date?: Date): void {
        if ( date ) {
            this.dateValue = date;
        } else {
            this.stringValue = '';
        }
    }
}