36

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
  • Did you ever find an answer to this? I'm trying to do the same thing Commented Mar 17, 2018 at 18:21

3 Answers 3

40

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);
    });
  }
7
  • 15
    You 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
  • 1
    I agree with @JonasPraem - currently just rendering <mat-calendar></mat-calendar> will always use today's date
    – jarodsmk
    Commented May 16, 2018 at 8:27
  • 1
    readonly selectedChanged: EventEmitter<D>; * @deprecated Switch to the dateChange and dateInput binding on the input element. * @deletion-target 6.0.0 Commented Jun 19, 2018 at 10:29
  • 4
    Wow... <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
  • 1
    Just a heads up. For Material version 8 i had to import MatDatepickerModule (so P in picker is lowercase)
    – Gabor
    Commented Dec 21, 2020 at 8:26
25

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
  • 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
    – Agorreca
    Commented Aug 11, 2021 at 19:57
  • How to get the icon visible, otherwise this is working solution.
    – Sami
    Commented Feb 1, 2022 at 13:10
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.