use mat-datepicker directly without input

问题:

I want to put the datepicker in a permanent sidebar always visible and not dependent on an input, is this possible? I imagined that just putting the component and adding opened = true could leave the datepicker inside a box always visible.

回答1:

turns out this is pretty straightforward import the MatDatePickerModule as per usual and then simply use the mat-calendar selector

<mat-calendar></mat-calendar>

In order to hook into the selection via typescript

  @ViewChild(MatCalendar) _datePicker: MatCalendar<Date>

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

回答2:

You can also try to hide with 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>

The advantage of hiding with css is that the datepicker is positioned relative to the hidden form-field

回答3:

The only working way I found is large and borrrrrrrring but works:

(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;
    }
}