diff --git a/tedi/components/form/date-picker/date-picker.component.spec.ts b/tedi/components/form/date-picker/date-picker.component.spec.ts index 996ed7c6..bece94c8 100644 --- a/tedi/components/form/date-picker/date-picker.component.spec.ts +++ b/tedi/components/form/date-picker/date-picker.component.spec.ts @@ -1230,4 +1230,26 @@ describe("DatePickerComponent", () => { jest.useRealTimers(); }); }); + + describe("External selected input changes", () => { + it("should update inputValue when selected input is changed externally", () => { + const date = new Date(2024, 5, 15); + fixture.componentRef.setInput("selected", date); + fixture.detectChanges(); + + expect(component.inputValue()).toBe("15.06.2024"); + }); + + it("should clear inputValue when selected input is set to null externally", () => { + fixture.componentRef.setInput("selected", new Date(2024, 5, 15)); + fixture.detectChanges(); + + expect(component.inputValue()).toBe("15.06.2024"); + + fixture.componentRef.setInput("selected", null); + fixture.detectChanges(); + + expect(component.inputValue()).toBe(""); + }); + }); }); diff --git a/tedi/components/form/date-picker/date-picker.component.ts b/tedi/components/form/date-picker/date-picker.component.ts index 3332a982..40b92a59 100644 --- a/tedi/components/form/date-picker/date-picker.component.ts +++ b/tedi/components/form/date-picker/date-picker.component.ts @@ -10,6 +10,7 @@ import { OnInit, viewChild, ElementRef, + effect, } from "@angular/core"; import { ButtonComponent } from "../../buttons/button/button.component"; import { ClosingButtonComponent } from "../../buttons/closing-button/closing-button.component"; @@ -272,11 +273,15 @@ export class DatePickerComponent implements OnInit { readonly translationService = inject(TediTranslationService); - ngOnInit(): void { - const selected = this.selected(); - this.inputValue.set(selected ? formatDate(selected) : ""); + constructor() { + effect(() => { + const selected = this.selected(); + this.inputValue.set(selected ? formatDate(selected) : ""); + }); + } - let active = selected ?? this.today; + ngOnInit(): void { + let active = this.selected() ?? this.today; // If the initial active date is disabled, find the first enabled date if (this.isDisabled(active)) {