javascript - Angular Material datepicker manual open - Stack Overflow

admin管理员组

文章数量:1346186

In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

One can also set the opened property to true/false like so:

<button mat-raised-button (click)="picker.opened = true">Open</button>

I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?

In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

One can also set the opened property to true/false like so:

<button mat-raised-button (click)="picker.opened = true">Open</button>

I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?

• javascript
• angular
• datepicker
• angular-material

Share Improve this question Follow asked Dec 11, 2017 at 20:40 MadCatm2MadCatm2 1,00155 gold badges2626 silver badges4141 bronze badges 2

• You can implement the dateChange emitter to reopen the the datepicker when a date is selected. – Mehdi Commented Dec 11, 2017 at 21:32
• ehhh, I see. Could you help me with some implementation details? – MadCatm2 Commented Dec 11, 2017 at 21:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I guess you can try this :

<mat-form-field class="example-full-width">
  <input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

in your ponent ts/js file you need to declare a new method :

export class YourComponent{
   @ViewChild('picker') picker;
   //....
   reOpenCalendar(){
     let self = this;
        setTimeout(
            ()=>{                
                self.picker.open();
            },
            50
        );
   }
}

This will introduce a flash effect as the date picker disappears and quickly reappears.

The other solution would be fork angular material datepicker ponent in your local project and introduce an Input property to disable the closing when a date is selected

The built-in datepicker control of Material library es with an internal Calendar ponent. You can use the following to have a calendar that is always open (without the input box but still works with date/month/year selection)

Read more about the calendar here:

https://onthecode.co.uk/angular-material-calendar-ponent/

本文标签： javascriptAngular Material datepicker manual openStack Overflow