Topic: Date and Time picker display issue in same row

Frank Kreutzer free asked 4 years ago


Expected behavior

I'm trying to put the date and time pickers in the same row, md-6 cols each.

Actual behavior

When I put them in the same row, the date picker displays weird. If I remove the time picker, the display/format is fine.

Resources (screenshots, code snippets etc.)

<div class="row" *ngIf="!isRecurringOptions">
    <div class="col-md-6">
      <!-- Event start date field -->
      <div class="form-group">
        <label for="startdate">Start Date <span class="red-text">*</span></label>
        <mdb-date-picker [placeholder]="'Select a start date...'" formControlName="startDate" name="startdate" [options]="startDateOptions"></mdb-date-picker>

        <!-- Event start date field error message -->
        <div *ngIf="eventModalForm.controls['startDate'].invalid && (eventModalForm.controls['startDate'].dirty || eventModalForm.controls['startDate'].touched)">
          <div *ngIf="eventModalForm.controls['startDate'].errors.required" class="alert alert-danger d-inline-flex mt-1" role="alert">
            <div class="tab my-auto"><i class="fas fa-exclamation-circle fa light-icon"></i></div>
            <div class="alert-text my-auto">Please select an event start date</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <!-- Event start time field -->
      <div class="form-group">
        <label for="starttime">Start Time <span class="red-text">*</span></label>
        <mdb-time-picker [buttonLabel]="'Done'"
                         [twelvehour]="true"
                         [darktheme]="false"
                         [placeholder]="'Select a start time'"
                         [showClock]="fasle">
        </mdb-time-picker>
      </div>
    </div>
  </div>

Screenshot: https://imgur.com/a/iP6hqKl


Arkadiusz Idzikowski staff answered 4 years ago


These are material controls, you should use md-form class instead of form-group in this case and add labels directly to the datepicker/timepicker components:

<div class="row">
  <div class="col-md-6">
    <div class="md-form">
      <mdb-date-picker
        [placeholder]="'Select a start date...'"
        name="startdate"
        label="Start date"
      ></mdb-date-picker>
    </div>
  </div>
  <div class="col-md-6">
    <div class="md-form">
      <mdb-time-picker
        [buttonLabel]="'Done'"
        [twelvehour]="true"
        [darktheme]="false"
        [placeholder]="'Select a start time'"
        [showClock]="false"
        label="Start time"
      >
      </mdb-time-picker>
    </div>
  </div>
</div>


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes