Always showing the calendar from datepicker - Angular

I need to have the datepicker in Angular always visible. The calendar will be always visible without the dependency on the button (don't need to click on the button)

example

Source .html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Upvotes: 4

Answers (3)

Krishna Rathore

Reputation: 9687

you can using opened="true" for this.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker opened="true"></mat-datepicker>
</mat-form-field>

Upvotes: -1

Tim Martens

Reputation: 1534

You can use mat-calendar for this:

<mat-calendar [selected]="selectedDate" (selectedChange)="selectedDate = $event"></mat-calendar>

Upvotes: 6

Jacopo Sciampi

Reputation: 3432

You can add opened="true" to the datepicker.

You can use code like this :

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker class="fixed-open" #picker opened="true"></mat-datepicker>
</mat-form-field>

Working example : https://stackblitz.com/edit/angular-ysspzm?file=app%2Fdatepicker-overview-example.html

Documentation : https://material.angular.io/components/datepicker/api

Upvotes: 0

Always showing the calendar from datepicker - Angular

Answers (3)

Related Questions