How to Keep Mat-Datepicker Calender Open, Even After Selecting a Date from Calendar

How to keep opened mat-datepicker after choosing date?

You have to add below code to disable animation as per https://github.com/angular/components/issues/4227#issuecomment-348148642

constructor( private overlayContainer:OverlayContainer, private renderer:Renderer2 ) {

    const disableAnimations:boolean = true;

    // get overlay container to set property that disables animations
    const overlayContainerElement:HTMLElement = this.overlayContainer.getContainerElement();

    // angular animations renderer hooks up the logic to disable animations into setProperty
    this.renderer.setProperty( overlayContainerElement, "@.disabled", disableAnimations);
}

and https://stackblitz.com/edit/angular-xq2upq working code

How to dynamically set month end date if start date is picked from the calendar of Angular's mat-datepicker functionality?

We can use (dateChange)="onStartChange($event)" from startDate picker to emit chosen value and thus updating value of param endDate which is Input value for endDate picker [value]="endDate".

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {
  endDate: any;

  onStartChange(event: any) {
    console.log('change ', event.value);
    if (this.endDate) return;
    this.endDate = moment(event.value).endOf('month').toDate();
  }
}

<mat-form-field appearance="fill">
  <mat-label>Choose a start date</mat-label>
  <input matInput [matDatepicker]="picker" (dateChange)="onStartChange($event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<br>
<br>

<mat-form-field appearance="fill">
<mat-label>Choose a end date</mat-label>
<input matInput [matDatepicker]="picker2" [value]="endDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

Working example:
Working example: https://stackblitz.com/edit/angular-wut7th-mfiyrd?file=src%2Fapp%2Fdatepicker-overview-example.html

Or with dateRange picker

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" (dateChange)="onStartChange($event)">
    <input matEndDate placeholder="End date"  [value]="endDate">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

Working example: https://stackblitz.com/edit/angular-wut7th-qchi5h?file=src%2Fapp%2Fdatepicker-overview-example.html

Angular Material MatDatePicker - How to keep it open and separate it from the input field

Import the MatDatePickerModule but use the <mat-calendar></mat-calendar> component

How to clear mat-date-range-input selection on the calendar?

Managed to find the answer upon posting.

this.range.reset();

The form group has a reset function, clearing the calendar selection.

When selecting a date how can I keep the datepicker open?

This seems to work on date change, you could refactor this to any event type you need.

Component

 @ViewChild('picker') picker;

  _openCalendar() {
   setTimeout(()=>this.picker.open());
  }

HTML

<input 
      matInput 
      [matDatepicker]="picker" 
      placeholder="Choose a date" 
      (dateChange)="_openCalendar()"
      #keepOpen>

Always showing the calendar from datepicker - Angular

You can use mat-calendar for this:

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

angular material 2 date picker auto open on focus

mdDatepicker provides method open() in order to open it manually doe developers. You can invoke it at md-input's focus event. See docs(Method of MatDatepicker).

<md-input-container>
  <input mdInput [mdDatepicker]="picker" (focus)="picker.open()" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Demo(included demo for opening on focus and opening in typescript)

---

Related Topics