直接使用mat-datepicker而无需输入

Question

我想把datepicker放在一个永久的侧边栏中，总是可见的，不依赖于输入，这是可能的吗？我认为只要将组件放入并添加opened = true，就可以使框中的datepicker始终可见。

Answer 1

事实证明，这非常简单，像往常一样导入MatDatePickerModule，然后只需使用mat-calendar选择器

<mat-calendar></mat-calendar>

为了通过typescript连接到选择

  @ViewChild(MatCalendar) _datePicker: MatCalendar<Date>

ngOnInit() {
    this._datePicker.selectedChange.subscribe(x => {
      console.log(x);
    });
  }

Answer 2

您也可以尝试使用css ex隐藏：

<mat-form-field style="width:1px;visibility:hidden;">
  <input matInput [matDatepicker]="picker" >
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-button (click)="picker.open()" ></button>

使用css隐藏的优点是日期选择器是相对于隐藏的表单字段定位的

Answer 3

我找到的唯一有效的方法是大而有效：

(partial credits)

Html

  <mat-form-field id="dashboardComponent">
    <input matInput
      [matDatepicker]="matDatepicker"
      [formControl]="dateFormControl"
      (dateChange)="onDateChanged('change', $event)"
      [max]="datePickerMaxDate"
      >
    <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #matDatepicker></mat-datepicker>
  </mat-form-field>

component.ts

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

export class MyComponent {

    // Date Picker
    public currentDate: Date = new Date() // set default here
    public dateFormControl: FormControl = new FormControl(this.currentDate)

css

/* DATE PICKER */
mat-form-field {
    margin: 0 0.5em; //adapt me to your needs
    width: 0.8em; //adapt me to your needs
    font-weight: normal;
}


#dashboardComponent {
    .mat-form-field-underline {
        background-color: transparent;
        height: 0;
    }
}