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.
Status
Open
Specification of the issue
- User: 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
Tags
Related topics
Arkadiusz Idzikowski staff commented 21 hours 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 14 hours 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 13 hours 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.