角度材料日期选择器添加水平线

Question

When I copy the DatePicker example from the Angular Material website it's adding an extra horizontal line to the bottom of it and I can't figure out why.

Here's the example:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

And here's a screenshot:

Answer 1

this problem is because you are using the angular material and also the cdn of materialize or materialize style. you could delete this line:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

and the line of the datepicker will be ok, and then, you could use other grid system for de rows and cols. for example: https://github.com/angular/flex-layout

Answer 2

I am just leaving this here in case someone else makes the same mistake I did. In my case I accidentally copy and pasted the date picker code inside an existing mat-form-field . I didn't notice it at first because of all the markup.

I had it like this and removing the outer mat-form-field fixed it for me:

        <mat-form-field>
          <mat-form-field>
            <mat-label>End Date</mat-label>
            <input matInput [(ngModel)]="endDate" #endDate="ngModel" [matDatepicker]="picker1">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </mat-form-field>