Topic: form with mdb-date-picker and label

Jens Ober pro asked 4 years ago


I am using the mdb-date-picker component in a form with other components (e. g. input/text).  
Start your code here<div class="container">
 <div class="row"> 
 <div class="col-md-6"> 
 <form>
 <p class="h5 text-center mb-4">Personal Data</p>
 <div class="md-form">
 <input type="text" id="form3" class="form-control" mdbActive>
 <label for="form3">Your name</label>
 </div>
 <div class="md-form">
 <mdb-date-picker id="birthday" name="mydate" [options]="myDatePickerOptions" [(ngModel)]="model" [locale]="'de'" required></mdb-date-picker>
 <label for="birthday">Your Birthday</label>
 </div>
 </form>
 </div> 
 </div> 
</div>

The result looks like this: form empty OK But after filling out the form the date pickers label does not show the same behaviour: form filled not OK   What i am doing wrong here?

Jens Ober pro answered 4 years ago


Here is the solution with class binding on the label:
<div class="container">
  <div class="row"> 
    <div class="col-md-6"> 
      <p class="h5 text-center mb-4">Personal Data</p>
      <div class="md-form">
        <input type="text" id="form3" class="form-control" mdbActive>
        <label for="form3">Your name</label>
      </div>
      <div class="md-form">
        <mdb-date-picker id="birthday" name="birthday" [options]="myDatePickerOptions" [(ngModel)]="birthday"></mdb-date-picker>
        <label [class.active]="birthday" for="birthday">Your Birthday</label>
      </div>
    </div> 
  </div> 
</div>
 

Damian Gemza staff answered 3 years ago


Dear Jesse,

I don't know about which problem you're talking about.

I have an mdb-date-picker component with [label] input on it, and the label is working fine.

Please take a look at the below code:

.html:

<mdb-date-picker name="mydate"  [label]="'Selected date'" [(ngModel)]="model" required></mdb-date-picker>

Best Regards,

Damian


JesseWallace free answered 3 years ago


Did you ever figure out a better solution for this where the label is not raised until the value is set?


Damian Gemza staff answered 4 years ago


Hello Jens Ober, For a quick workaround, please add class="active" to your <label> in datePicker. We're working on better solution of this problem. Best Regards, Damian

bmsbreaux pro commented 4 years ago

Can this component have the possibility show a icon as fa fa-calendar in the left

Damian Gemza staff commented 4 years ago

Do you want to display datepicker as calendar icon, not as input field? If yes, there isn't possibility to do something like this. Best Regards, Damian

Jens Ober pro commented 4 years ago

Hi Damian, thank you for your workaround. It works. Using the active class with class binding makes the animation work as expected.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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