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

Question

我想将datepicker放在永久侧边栏中,始终可见并且不依赖于输入,这可能吗？我想,只需放入组件并添加opens = true就可以将日期选择器保留在一个始终可见的框内.

Answer 1

事实证明这是非常简单的导入MatDatePickerModule按照惯例,然后只需使用mat-calendar选择器

<mat-calendar></mat-calendar>

为了通过打字稿挂钩选择

  @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

可能有一个日期选择器“没有”输入。但是，日期选择器仍然需要输入才能起作用，因此一种解决方法只是将输入隐藏起来：

<input [matDatepicker]="picker" type="hidden">
<mat-datepicker #picker></mat-datepicker>
<mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>

演示版