Angular Material 日期选择器范围但只选择年份和月份

Question

我很难找到一种方法来使用只有年份和月份的 mat-date-range-picker... 你们有没有找到办法做到这一点？ :)

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

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

提前致谢\o/

Answer 1

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

Answer 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>

在文件中：

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;
    }
}

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

Angular Material 日期选择器范围但只选择年份和月份

Angular Material Date Picker Range but only choosing year and month

angular-material

angular

mat-datepicker