Angular Material Date Picker Range，但只选择年份和月份答案

【问题标题】：Angular Material Date Picker Range but only choosing year and monthAngular Material Date Picker Range，但只选择年份和月份
【发布时间】：2021-06-17 02:05:26
【问题描述】：

我很难找到一种方法来使用只有年和月的 mat-date-range-picker... 你们已经找到方法了吗？ :)

我尝试使用文档中用于日期选择器的相同功能，但我找不到为第二个日期重新启动弹出窗口的方法....

<mat-datepicker #dp
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="example-month-picker">
</mat-datepicker>

在此先感谢所有\o/

【问题讨论】：

不确定你卡在哪里了。能否请您详细说明..
不要使用 docs:material.angular.io/components/datepicker/examples 中的最后一个示例？

标签： angular angular-material mat-datepicker

【解决方案1】：

以下是月份范围选择器弹出窗口的示例。只需使用它来创建一个弹出窗口。 DEMO

【讨论】：

这正是我想要的:)。但是角材料没有例子吗？
在最坏的情况下，这可以解决我需要做的事情:) 谢谢 :)
说实话，Angular 材料的文档很差。

【解决方案2】：

我正在使用 Angular 技术开发应用程序，我遇到了这个问题，并到处寻找如何使用 Angular Material 提供解决方案，但没有，我设法用以下方法解决了它（代码可以改进）：

在文件 html 中：

<mat-form-field appearance="fill">
    <mat-label>date</mat-label>
    <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date" formControlName="mesIni">
        <input matEndDate placeholder="End date" formControlName="mesFin">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker id="picker" #picker disabled="false" startView="multi-year"
                           (monthSelected)="chosenMonthHandler($event, picker)" (click)="true">
    </mat-date-range-picker>
</mat-form-field>

在文件 ts 中：

formBusqueda: FormGroup;
//flag to identify if the start date or end date is entered
mclick = 0;

ngOnInit() {}

get controls() {
    return this.formBusqueda.controls;
}

public chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>):void {
    this.mclick++;

    if (this.mclick == 1) {
        const ctrlValue = this.controls.mesIni.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesIni.setValue(ctrlValue);
        
        datepicker.close();

        //It can improve
        var inter = setInterval(() => {
            let htmlElem: HTMLCollectionOf<HTMLElement> = document.getElementsByClassName('mat-focus-indicator mat-icon-button mat-button-base') as HTMLCollectionOf<HTMLElement>;

            //Here it is important to put the id of the element that is clicked to open the calendar
            htmlElem[1].click();
            clearInterval(inter);
        }, 50);
    } else if (this.mclick == 2) {
        const ctrlValue = this.controls.mesFin.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesFin.setValue(ctrlValue);
        datepicker.close();
        this.mclick = 0;
    }
}

诀窍是延迟关闭并重新打开日历，这并不理想，但它是一种解决方法。

【讨论】：