如何自定义 Angular Mat 日期选择器输入字段

Question

我正在尝试在我的 Angular 应用程序中使用简单的日期范围选择器。如何设置角材料日期选择器输入字段的宽度和高度。

我的html-

<div class="no-bottom">
  <mat-form-field appearance="outline">
    <mat-label>Datumsbereich</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
      <input matStartDate formControlName="start" placeholder="Startdatum">
      <input matEndDate formControlName="end" placeholder="Endtermin">
    </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-form-field>
</div>

我的 CSS -

.no-bottom {
   margin-bottom: -1.25em !important;
}

我的组件 -

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { NativeDateAdapter } from '@angular/material/core';

@Component({
  selector: 'date-range-picker',
  templateUrl: './date-range-picker.component.html',
  styleUrls: ['./date-range-picker.component.scss'],
  providers: [NativeDateAdapter],
})
export class DateRangePickerComponent {
  @Output() rangeChange = new EventEmitter<FormGroup<any>>();
  
  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  constructor() {
    this.range.valueChanges.subscribe(value => {
      this.rangeChange.emit(this.range); 
    });
  }
}

Answer 1

您无法设置 mat-form-field 宿主元素的宽度和高度。 组件样式封装在组件的宿主元素中，这样它们就不会影响组件的其余部分。

Angular 提供了 ViewEncapsulation.None :

将组件的样式添加到文档中， 使它们在整个应用程序中可用，因此完全 全局并影响文档中的任何匹配元素。

您需要进行以下更改来设置宽度或高度：

@Component({
  selector: 'date-range-picker',
  templateUrl: './date-range-picker.component.html',
  styleUrls: ['./date-range-picker.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [NativeDateAdapter],
}) ....

//日期范围-picker.component.scss

样式范围仅限于组件：

date-range-picker {
  .mat-mdc-form-field {
    @apply w-[450px];
    // ..... 
  }
}