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.
3 Answers
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);
});
}
-
15You can also do
<mat-calendar [selected]="selectedDate" (selectedChange)="selectedDate = $event"> </mat-calendar>
- which avoids the viewchild and also enables the calendar to show the selected date Commented May 2, 2018 at 8:07 -
1I agree with @JonasPraem - currently just rendering
<mat-calendar></mat-calendar>
will always use today's date– jarodsmkCommented May 16, 2018 at 8:27 -
1
readonly selectedChanged: EventEmitter<D>;
* @deprecated Switch to thedateChange
anddateInput
binding on the input element. * @deletion-target 6.0.0 Commented Jun 19, 2018 at 10:29 -
4Wow... <mat-calendar> is awesome... much neater than the full-block Angular Materials DatePicker. But why is it not documented anywhere ? Commented May 1, 2020 at 11:12
-
1Just a heads up. For Material version 8 i had to import MatDatepickerModule (so P in picker is lowercase)– GaborCommented Dec 21, 2020 at 8:26
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
-
i set [hidden]="true" but it not work. and base your answer i use style="visibility:hidden;" and it completely disappear. thanks Stefan ;) Commented Apr 20, 2020 at 13:19
-
I had to add these modules in the import section of my module too:
MatFormFieldModule
,MatInputModule
– AgorrecaCommented Aug 11, 2021 at 19:57 -
How to get the icon visible, otherwise this is working solution.– SamiCommented Feb 1, 2022 at 13:10
The only working way I found is large and borrrrrrrring but works:
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;
}
}