form with mdb-date-picker and label

Topic: form with mdb-date-picker and label

Jens Ober pro asked 6 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?

Add comment

Jens Ober pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

JesseWallace free answered 5 years ago

0 0 Best answer

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

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

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 6 years ago

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

Damian Gemza staff commented 6 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 6 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Jens Ober

Pro User 20Support score
3Questions 2Answers 0Snippets