Topic: Fix: Datepicker label losing "active" class despite the value being set

cyleph pro asked 5 years ago

Hi there,

I'm using the datepicker like this:

<mdb-date-picker name="start" label="Start" [options]="dpOtions" formControlName="start"></mdb-date-picker>

Error Description:
On init, the form looks fine, like the normal input fields with the label on the line. If I click the input/datepicker the modal shows up and in the background the label slides up (i.e. has class "active" attached), just like with normal input fields. When I select a date and close the modal the label slides down again (i.e. class "active" is gone).

Set a placeholder, because the "checkActive()" method in datepicker.component checks for the placeholder length to be > 0. Sure works, but then the date field looks a littble bit out of place, since I don't use placeholders for my other inputs and it would be the only one with the label "up".

Proposed Fix (in datepicker.component.ts)

  checkActive() {
    return this.placeholder.length || this.showSelector || this.utilService.isInitializedDate(this.selectedDate);

Adrian Sawicki free answered 5 years ago

Hello, Thanks for this workaround. We will think about it and add it to our next release scope.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No