日期范围输入角材料

Question

为什么在我的应用程序中看起来像是我无法设法更改填充/边距的方法，有时第一次约会有时会有适当的可能性。

另外，占位符也看起来不像文档，“输入日期范围”到“开始日期 - 结束日期”的动画与存在的文档不同：

这是我的代码（我从文档中复制了）：

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

单击日期选择器并按“

”键时，将日期调整为正确的位置。 <-” and “->

Answer 1

为了避免问题，您可能需要调整

styles

部分，如下所示。

angular.json

该订单将通过Angular维护在生成的CSS文件中。因此，除非您故意在自己的

 "styles": [
      ...
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      // Put the angular material css files at the bottom as possible 
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
    ],

中覆盖材料样式，否则不会被另一个库所覆盖