Topic: Set Datepicker to null / empty throws error?
Evolet free asked 7 months ago
Expected behavior Calender is empty on initialization of page. Actual behavior Setting defaultvalue to empty string or null results in an error in the dev console. valueDefault=' ' or valueDefault=null Resources (screenshots, code snippets etc.)
How to fix this issue?
You need to set the default date using date picker input, not the
mdb-datepicker component. Here is an example:
<mdb-form-control> <input mdbInput [mdbDatepicker]="basicDatepicker" type="text" class="form-control" id="exampleDatepicker1" [(ngModel)]="date" /> <label mdbLabel for="exampleDatepicker1" class="form-label">Select a date</label> <mdb-datepicker-toggle [mdbDatepicker]="basicDatepicker"></mdb-datepicker-toggle> <mdb-datepicker #basicDatepicker></mdb-datepicker> </mdb-form-control>
date = null;
The error is probably caused by the second date picker component that you added to the template. You need to create both input element with
[mdbDatepicker] directive and
mdb-datepicker and combine them together. In this case, the second date picker component is not paired with any input.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 2.1.0
- Device: Laptop
- Browser: Chrome Dev
- OS: Mac OS
- Provided sample code: No
- Provided link: No