Topic: Date Picker invalid Date Issue
Expected Behavior: The user can enter a date in MM/DD/YYYY format. If the user enters an incomplete date such as MM/DD and then blurs out (moves focus away), the application should: Show an "Invalid date" error message. Allow the user to either: Delete the entered invalid date, or Click on the mdb-datepicker-toggle button to open the datepicker and select a valid date.
Actual Behavior: When the user enters an incomplete date (e.g., MM/DD) and blurs out: The "Invalid date" error appears as expected. But if the user then clicks on the mdb-datepicker-toggle, the datepicker does not open, preventing the user from correcting the date via the UI.
Observation: If the user enters a fully formatted but invalid date (e.g., 22/22/2222), the mdb-datepicker-toggle works, and the user can open the picker.
However, if the input is partially filled (e.g., 22/22 or just 22) and the user clicks the toggle, it throws the following error in the console:
ERROR TypeError: Cannot read properties of undefined (reading 'toLowerCase')
<mdb-form-control>
<input mdbInput mdbValidate [mdbDatepicker]="incidentDatePicker" type="text"
class="form-control form-control-sm" id="incidentDate" formControlName="incidentDate"
(blur)="checkDateFormatOnBlur($event)" (input)="formatInputDate($event)" maxlength="10"
autocomplete="off" placeholder="MM/DD/YYYY" />
<label mdbLabel for="incidentDatepicker"
class="asterix--before form-label">{{labels.incidentDate}}</label>
<mdb-datepicker-toggle [mdbDatepicker]="incidentDatePicker"></mdb-datepicker-toggle>
<mdb-datepicker [inline]="true" #incidentDatePicker [minDate]="labels.minimumDateToPick"
[maxDate]="futureDates" format="mm/dd/yyyy"
(dateChanged)="onDatepickerDateChange($event)"></mdb-datepicker>
</mdb-form-control>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 8.0.0
- Device: Laptop
- Browser: Chrome
- OS: Mac - IOS
- Provided sample code: No
- Provided link: No