CODEWITHSUNDEEP
angularangular-materialmat-datepicker
kkthlv
kkthlv

Reputation: 73

Handle date selection in MatDatepicker

I have mat-datepicker with own button(s) in my (template driven) form.

<mat-form-field>
      <input
        matInput
        name="validFrom"
        [disabled]="isReadOnly"
        [(ngModel)]="validFrom"
        required
        (dateChange)="validFromChanged($event)"
        (dateInput)="validFromChanged($event)"
        [matDatepicker]="validFromPicker">
      <mat-datepicker-toggle matSuffix [for]="validFromPicker"></mat-datepicker-toggle>
      <mat-datepicker #validFromPicker>
        <mat-datepicker-actions>
          <button mat-button matDatepickerCancel>Cancel</button>
          <button mat-raised-button color="warn" (click)="setToday()">Today</button>
          <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
        </mat-datepicker-actions>
        <mat-calendar (click)="onCalendarClick($event)"></mat-calendar>
      </mat-datepicker>
</mat-form-field>

Is there any way to handle date change event (when user clicks on some date in calendar) before is clicked on Apply button?

How can I handle onCalendarClick()? Because it does not work in my case.

Or, is there any other option how can I add custom button "Today" and do not prevent automatic close when date is selected on the calendar?

Upvotes: 0

Views: 445

Answers (1)

Eliseo
Eliseo

Reputation: 58019

It's similar to this SO

Just use

<mat-datepicker #picker (opened)="getMonthView(picker)" 
                        (monthSelected)="getMonthView(picker)">
....
</mat-datepicker>

Well, what do you want to do when "click"? If it's change the date but not close use simply

  getMonthView(picker:any)
  {
    setTimeout(()=>{
      this.sub && this.sub.unsubscribe()
      this.sub=picker._componentRef?.instance._calendar
               .monthView.selectedChange.subscribe((res:any)=>{
                  this.date=res; //<--here store the "date"
                })
     })
  }
  setToday(picker:any)
  {
    picker._componentRef.instance._calendar.activeDate=this.date=new Date()
  }

stackblitz in Angular 14

Upvotes: 1

Related Questions