Date-Picker-Luxon-Modifier-Directive Bug? #11051

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

• What is your product version? - 11.1
• What is your product type (Angular or MVC)? - Angular
• What is product framework type (.net framework or .net core)? .net core

If issue related with ABP Framework

• What is ABP Framework version?

If issue is about UI

• Which theme are you using? - default
• What are the theme settings?

Bug?

The Date-Picker-Luxon-Modifier-Directive.ts appears to have a bug for me. Current code causes DateTime inputs values to go NULL in ngx-bootstrap modals the SECOND time I activate the modal which have the DateTime inputs in it

Notable details

https://stackoverflow.com/questions/69961449/net6-and-datetime-problem-cannot-write-datetime-with-%3Ekind-utc-to-postgresql-ty I am using postgres as my db with the driver flag "Npgsql.EnableLegacyTimestampBehavior" set to true

I programmatically open the modal like so

openModal() {
        this.modalService.show(ModalComponent, {
            initialState: {
                dto: this.dto,
            },
        });
    }

DTO date values are set directly to the UI: (modal.component.html)

<input class="form-control form-control-sm" type="datetime" bsDatepicker datePickerLuxonModifier [(date)]="dto.due" />

Date-Picker-Luxon-Modifier-Directive Code:

ngOnChanges({ date }: SimpleChanges) {
        if (date && date.currentValue && !compare(date.currentValue, date.previousValue)) {
            setTimeout(() => {
                if (date.currentValue instanceof DateTime) {
                    this.bsDatepicker.bsValue = date.currentValue.toJSDate();
                } else {
                    let year = date.currentValue.getFullYear();
                    let month = date.currentValue.getMonth();
                    let day = date.currentValue.getDate();
                    this.bsDatepicker.bsValue = this._dateTimeService.createJSDate(year, month, day);
                }
            }, 0);
        } else {
            setTimeout(() => {
                this.bsDatepicker.bsValue = null;
            }, 0);
        }
    }

Date-Picker-Luxon-Modifier-Directive Code Fix:

ngOnChanges({ date }: SimpleChanges) {
        if (date && date.currentValue) {
            if (!compare(date.currentValue, date.previousValue)) {
                setTimeout(() => {
                    if (date.currentValue instanceof DateTime) {
                        this.bsDatepicker.bsValue = date.currentValue.toJSDate();
                    } else {
                        let year = date.currentValue.getFullYear();
                        let month = date.currentValue.getMonth();
                        let day = date.currentValue.getDate();
                        this.bsDatepicker.bsValue = this._dateTimeService.createJSDate(year, month, day);
                    }
                }, 0);
            }
        } else {
            setTimeout(() => {
                this.bsDatepicker.bsValue = null;
            }, 0);
        }
    }