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

可以让“没有”输入的日期选择器。但是，datepicker仍然需要输入才能工作，因此一个解决方法只是一个隐藏的输入：

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

Demo

Answer 3

您也可以尝试隐藏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隐藏的优点是，datepicker相对于隐藏的表单字段

定位

Answer 4

我发现的唯一工作方法是大而沉闷，但有效：

（partial credits）

HTML

editText.filters = arrayOf(InputFilter.LengthFilter(maxLength))

component.ts

  <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>

css

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

export class MyComponent {

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

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

4 个答案:

HTML

component.ts

css