Display error on date picker

Topic: Display error on date picker

ufasoli pro asked 7 years ago

Hi I'm having multiple issues with the date picker : * If I assign a label to it when I select a value, the label will overlap with the value https://ibb.co/dU23no https://ibb.co/g6fCf8 * When I open it for the first time, the modal pop-up does not completely hide the elements in the back. https://ibb.co/eXJLYT

Damian Gemza staff commented 7 years ago

Dear ufasoli, About the first problem - I'm noticing this, and we'll try to fix this ASAP. For now, please use [placeholder]=" ' Some placeholder ' " instead of label. About the second problem - Could you please provide me reproduction code which shows your case? Best Regards, Damian

Add comment

ufasoli pro answered 7 years ago

0 0 Best answer

Hi, thanks for the input, yes for the 1st problem I ended up doing that and it seems to work fine as a workaround. As for the 2nd issue, here's the code :

<div class="jumbotron flex-fill">
<form  #searchForm="ngForm" (ngSubmit)="doSearch()">


  <div class="row m-2 form-group">

    <div class="col-sm-6 " *ngIf="depots">
      <mdb-select [(ngModel)]="search.fromDepot"
                  id="fromDepot"  name="fromDepot" [options]="depots" title="Dépôt de début" >
      </mdb-select>
      <label class="mr-sm-2" for="fromDepot">Dépôt début:</label>
    </div>

    <div class="col-sm-6" *ngIf="depots">
      <mdb-select [(ngModel)]="search.toDepot"
                  id="destinationDepot" [options]="depots"  name="destinationDepot" title="Dépôt de fin" >

      </mdb-select>
      <label class="mr-sm-2" for="destinationDepot">Dépôt fin:</label>
    </div>



  </div>

  <div class="row m-2 align-items-center">

    <div class="col-md-3 ">
        <mdb-date-picker [options]="dateOptions" name="startTimeStart" [placeholder]="' '" [label]="'Date début de'" [(ngModel)]="search.startTimeStart" mdbWavesEffect></mdb-date-picker>

    </div>

    <div class="col-md-3 mt-2">
        <mdb-time-picker [buttonLabel]="'OK'" [twelvehour]="false" [darktheme]="false"
                         [label]="'à'" [(ngModel)]="search.startTimeStartT" name="startTimeStartT" mdbWavesEffect></mdb-time-picker>
    </div>


    <div class="col-md-3 align-items-center">
        <mdb-date-picker [options]="dateOptions" name="startTimeEnd" [placeholder]="' '" [label]="'Date début à'" [(ngModel)]="search.startTimeEnd" mdbWavesEffect></mdb-date-picker>
    </div>

    <div class="col-md-3 align-items-center mt-2">
        <mdb-time-picker [buttonLabel]="'OK'" [twelvehour]="false" [darktheme]="false"
                         [label]="'Heure fin'" [(ngModel)]="search.startTimeEndT" name="startTimeEndT" mdbWavesEffect></mdb-time-picker>

    </div>
  </div>

  <div class="row m-2 align-items-center">

    <div class="col-md-3 ">
      <mdb-date-picker [options]="dateOptions" name="endTimeStart" [placeholder]="' '" [label]="'Date fin de'" [(ngModel)]="search.endTimeStart" mdbWavesEffect></mdb-date-picker>

    </div>

    <div class="col-md-3 mt-2">
      <mdb-time-picker [buttonLabel]="'OK'" [twelvehour]="false" [darktheme]="false"
                       [label]="'à'" [(ngModel)]="search.endTimeStartT" name="endTimeStartT" mdbWavesEffect></mdb-time-picker>
    </div>


    <div class="col-md-3 align-items-center">
      <mdb-date-picker [options]="dateOptions" name="endTimeEnd" [placeholder]="' '" [label]="'Date fin à'" [(ngModel)]="search.endTimeEnd" mdbWavesEffect></mdb-date-picker>
    </div>

    <div class="col-md-3 align-items-center mt-2">
      <mdb-time-picker [buttonLabel]="'OK'" [twelvehour]="false" [darktheme]="false"
                       [label]="'à'" [(ngModel)]="search.endTimeEndT" name="endTimeEndT" mdbWavesEffect></mdb-time-picker>

    </div>
  </div>


  <div class="m-2 d-flex flex-row-reverse">
    <button type="submit" class="btn btn-primary waves-light" mdbWavesEffect>Rechercher <i class="fa fa-search"></i> </button>
    <button type="button" class="btn btn-blue-grey waves-light" (click)="resetSearch()"  mdbWavesEffect>Reinitialiser <i class="fa fa-eraser"></i></button>
  </div>

</form>




</div>

Damian Gemza staff commented 7 years ago

Dear ufasoli, Unfortunately, I'm unable to reproduce your second case. Could you please send me your project at d.gemza@mdbootstrap.com? I would like to check your code. Best Regards, Damian

Damian Gemza staff commented 7 years ago

Dear ufasoli, About 1st question: instead of using label element, please use [label]=" 'your-label' " on datepicker element, and pass there mdbInputDirective, and you're label will be lifted up.

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

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

About author

ufasoli

Pro User

10Support score
3Questions 1Answers

0Snippets likes 0Snippets