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?
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()
}