Quiero poner el selector de fecha en una barra lateral permanente siempre visible y que no dependa de una entrada, ¿es posible? Imaginé que simplemente poniendo el componente y agregando open = true podría dejar el selector de fechas dentro de un cuadro siempre visible.
resulta que es bastante sencillo importar el MatDatePickerModule como de costumbre y luego simplemente usar el selector mat-calendar
<mat-calendar></mat-calendar>Para enganchar a la selección a través de mecanografiado
@ViewChild(MatCalendar) _datePicker: MatCalendar<Date> ngOnInit() { this._datePicker.selectedChange.subscribe(x => { console.log(x); }); }También puedes intentar ocultar con 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>La ventaja de ocultar con css es que el selector de fecha se coloca en relación con el campo de formulario oculto
La única forma de trabajo que encontré es grande y aburrida pero funciona:
<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({ .... encapsulation: ViewEncapsulation.None }) export class MyComponent { // Date Picker public currentDate: Date = new Date() // set default here public dateFormControl: FormControl = new FormControl(this.currentDate) /* 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; } }