Angular material today button

Question

我的任务是在angular日期选择器弹出窗口上放一个today按钮。(选择今天的日期并关闭弹出窗口)

<input matInput [matDatepicker]="toPicker" formControlName="validTo" >
<mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
<mat-datepicker #toPicker  >
<mat-datepicker-actions>
<button mat-button (click)="goToday()">Today</button>
</mat-datepicker-actions> 
</mat-datepicker>

角函数:

@ViewChild('toPicker') toPicker: MatDatepicker<Date>;
goToday() {
this.toPicker.select(new Date());
this.toPicker.close();
}

这工作!不幸的是，默认的日期选择被打破了。我可以点击日期，但弹出窗口仍然打开。你知道如何添加today按钮并保留默认功能吗?

Answer 1

我在我的项目中有同样的问题，我有一个想法。我希望它能帮助你。

@ViewChild('picker') datePicker: MatDatepicker<Date>;
goToday() {
this.datePicker.select(new Date());
this.datePicker.close();
}
insertButton() {
var matCalendar = document.getElementsByTagName("mat-calendar");
if (matCalendar) {
document.getElementsByTagName("mat-calendar")[0].insertAdjacentHTML('afterend', '<div class="m-2"><button id="today-button" style="width: 80px;float: right;">Today</button></div>')
var todayButton = document.getElementById("today-button");
todayButton.addEventListener("click", this.goToday.bind(this))
}
}

您可以在date - picker-toggle和date - picker输入的click事件中调用insertButton()。它仍然对我有效

Answer 2

使用mat-datepicker有一个问题，即我们如何访问mat-calendar

当我们有一个垫日期选择器时，垫日历在

mat-date-picker._componentRef?.instance._calendar

有了这个想法，我们可以使用mat-datepicker-actions

<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="date" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker >
<mat-datepicker-actions>
<button mat-raised-button color="primary" (click)="selectToday(picker)">
Today
</button>
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>

En selectToday我们可以使用

//see that we pass the mat-date-picker
selectToday(picker:any)
{
picker._componentRef.instance._calendar.activeDate=new Date()
}

但是如果我们使用垫子日期选择器，我们需要知道垫子日期选择器有多接近

打开后我们可以订阅monthView的selectedChange

getMonthView(picker:any)
{
setTimeout(()=>{
this.sub && this.sub.unsubscribe()
this.sub=picker._componentRef?.instance._calendar
.monthView.selectedChange.subscribe((res:any)=>{
this.date=res;
picker.close()
})
})
}

当我们调用这个函数时?

我们需要在打开日期选择器时调用这个函数，也需要在选择月份时调用这个函数-单击year并选择月份-

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

一个stackblitz