Topic: datepicker does not display value in Mdb 10
After upgrading to Angular 21 and Mdb 10 from Angular 20 Mdb 9.1 datepicker does not display value in some cases. html or ts code was not changed. If downgrade back to Angular 20 Mdb 9.1 it works fine. So far this issue was found on several modal forms. Component is standalone. imports: [ReactiveFormsModule, DatePipe, MdbFormsModule, MdbValidationModule, MdbSelectModule, MdbTabsModule, MdbDatepickerModule, MdbCheckboxModule,
],
html
<div class="col-12 col-lg-6">
<mdb-form-control>
<input
mdbInput
[mdbDatepicker]="meetingDate"
type="text"
class="form-control"
id="iMeetingDate"
formControlName="meetingDate"
(keydown)="false"
(click)="meetingDate.open()"
/>
<label mdbLabel for="iMeetingDate" class="form-label">Meeting Date</label>
<mdb-datepicker-toggle [mdbDatepicker]="meetingDate" ></mdb-datepicker-toggle>
<mdb-datepicker #meetingDate [confirmDateOnSelect]="true" [format]="formatDate"></mdb-datepicker>
</mdb-form-control>
</div>
ts:
mySchedule!: MyScheduleModel;
formatDate = 'mm/dd/yyyy';
constructor(
public modalRef: MdbModalRef<MyScheduleUpdateComponent>,
private fb: FormBuilder,
) {
this.myForm = this.fb.group({
meetingDate: [],
});
}
get meetingDate(): AbstractControl {
return this.myForm.get('meetingDate')!;
}
ngOnInit(): void {
console.log(this.mySchedule);
if (this.mySchedule.meetingDate != null) {
this.meetingDate.setValue(new Date(this.mySchedule.meetingDate));
}
}
Parent component:
public updateScheduleModal(
mySchedule: MyScheduleModel
): void {
this.modalService.open(MyScheduleUpdateComponent, {
modalClass: 'modal-md',
data: {
mySchedule
},
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 10.0.0
- Device: laptop
- Browser: Chrome
- OS: W11
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 2 days ago
Do you still use Zone.js in your app or did you switch to the zoneless change detection (default in Angular 21)? This is probably the most important difference between v20 and v21, because if your components relied on Zone.js change detection to update the
meetingDate, that could be the cause of the problems.Could you please provide more details about the data flow and problems with datepicker values? Does the problem occur when you update the
meetingDateon modal init? What exactly breaks in the datepicker component?ammi pro commented 1 day ago
Yes, the project still relies on Zone.js. Data flow: When I click a button in the parent component, it calls the updateScheduleModal method, which opens MyScheduleUpdateComponent and passes the mySchedule data to it. The component opens successfully; however, the date picker does not display mySchedule.meetingDate. Other form controls, such as inputs and selects, display the passed data correctly. If I interact with the date picker, I am able to select a date without issue.
ammi pro commented 1 day ago
if I load data on onInit, date picker is blank. if I load it this way, it seems to be working fine.
ngAfterViewInit() { Promise.resolve().then(() => { this.loadForm(); }); }
However, on the other modal with more complex data flow this trick does not work.on that component if data populated onInit or ngAfterViewInit it shows blank datepicker. if I change input part of datepicker to [value]="myDate.value" (valueChange)="myDate.setValue($event)".
it shows value, but without formating.
Arkadiusz Idzikowski staff commented 23 hours ago
It seems like in this case the datepicker component is not fully initialized yet when you update the form value on the modal init. That's why either changing to
ngAfterViewInitor usingPromise.resolveto pushsetValueto the next microtask helps resolve this problem.Could you provide more information about the data flow in this other modal so we can recreate it on our end?
ammi pro commented 18 hours ago
As I mentioned before it works fine in all MDB versions prior to MDB 10. Even in MDB 10 all other controls like input or select work fine and only datepicker has this issue. Also, it happens only in modals. Please fix it ASAP. Thank you.
Arkadiusz Idzikowski staff commented 55 minutes ago
We will of course fix the bug I described in the previous comment, but I am afraid that may not be enough to fix the problem with this more complex data flow you mentioned (if you already tried the
Promise.resolveworkaround and it did not help). That's why we wanted to reproduce it before we add any improvements.