34

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.

Luis Ruiz Figueroa
  • 2,537
  • 3
  • 18
  • 23

3 Answers3

39

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);
    });
  }
Brett Smith
  • 2,992
  • 1
  • 20
  • 22
  • 15
    You can also do ` ` - which avoids the viewchild and also enables the calendar to show the selected date – Jonas Praem May 02 '18 at 08:07
  • 1
    I agree with @JonasPraem - currently just rendering `` will always use today's date – jarodsmk May 16 '18 at 08:27
  • 1
    `readonly selectedChanged: EventEmitter;` * @deprecated Switch to the `dateChange` and `dateInput` binding on the input element. * @deletion-target 6.0.0 – Stefan Rein Jun 19 '18 at 10:29
  • Now should be `"selectedDate = $event.value"` – Stuart Hallows Feb 05 '19 at 13:16
  • 4
    Wow... is awesome... much neater than the full-block Angular Materials DatePicker. But why is it not documented anywhere ? – Mike Gledhill May 01 '20 at 11:12
  • Just to say, the Calendar component fits in really nicely in as a date picker for an agGrid cell. It's much more stylish than the full-blown Materials date picker. https://www.codeproject.com/Articles/5266363/agGrid-for-Angular-the-missing-manual – Mike Gledhill May 02 '20 at 11:12
  • 1
    Just a heads up. For Material version 8 i had to import MatDatepickerModule (so P in picker is lowercase) – Gabor Dec 21 '20 at 08: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

Stefan
  • 369
  • 2
  • 4
  • i set [hidden]="true" but it not work. and base your answer i use style="visibility:hidden;" and it completely disappear. thanks Stefan ;) – Amir Azizkhani Apr 20 '20 at 13:19
  • I had to add these modules in the import section of my module too: `MatFormFieldModule`, `MatInputModule` – Agorreca Aug 11 '21 at 19:57
  • How to get the icon visible, otherwise this is working solution. – Sami Feb 01 '22 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;
    }
}
Pipo
  • 4,653
  • 38
  • 47