Angular 角度材料日期选择器-月份和；仅一年

我希望我的角材质日期选择器仅显示月/年。没有日子

这是我的日期选择器：

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

---

上述方法不再有效。现在的解决方案是什么？

这是一个对我有用的代码。我看你也在尝试类似的事情。希望能有帮助

.html

文件：

<mat-form-field>
    <input matInput [matDatepicker]="dp2" [min]="sixMonthsAgo" [max]="today" placeholder="Select a Date" (click)="openDatePicker(dp2)">
    <mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle>
    <mat-datepicker #dp2 startView="multi-year" (monthSelected)="closeDatePicker($event, dp2)"></mat-datepicker>
  </mat-form-field>

  this.today = new Date();
  this.sixMonthsAgo = new Date();
  this.sixMonthsAgo.setMonth(this.today.getMonth() - 6);

  openDatePicker(dp) {
    dp.open();
  }

  closeDatePicker(eventData: any, dp?:any) {
    // get month and year from eventData and close datepicker, thus not allowing user to select date
    dp.close();    
  }

---

要求在输入元素上显示“MMMM-YYYY”格式。 “MMMM YYYY”格式为“月-年”。 要创建自定义日期格式并应用于mat日期选择器

在HTML中

<mat-label>For the Month</mat-label>
<input matInput [matDatepicker]="picker1" name="CalMonth" formControlName="CalMonth">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1 disabled="false"></mat-datepicker>

然后添加到组件中

@Component({
  selector: 'app-monthselector',
  templateUrl: './monthselector.component.html',
  styleUrls: ['./monthselector.component.scss'],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})

之后，将格式添加到相关控制器

this.UIForm = new FormGroup({
      CalMonth: new FormControl(moment()),
    }); 

按照上述步骤逐一操作，您可以将日期格式自定义为“月-年”

您也可以更改任何其他日期格式，仅更改此格式

dateInput:'MMMM YYYY'，

谢谢

Indika Pradeep

在.html中编写代码

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这对我来说很好。 日期格式将显示如下屏幕截图

---

我已经制定了一个解决方案，完全依赖官方角度材料文档中给出的示例：

带有代码的示例运行良好，但当用户单击标题中的年份时，日历中仍有“月”视图的导航

这是一个转折点：在定制组件的TS中

声明为在“角度材质”链接中，我添加：

@ViewChild('datePicker') public dp;

ngAfterViewInit(): void {
  this.dp.openedStream.subscribe(async _ => {
    while (this.dp._popupComponentRef.instance._calendar == null)
      await this.__delay__(100)

    this.dp._popupComponentRef.instance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance.currentPeriodClicked = function () {        
    
        // redefine here calendar navigation in header
        
        if (this.calendar.currentView == 'month')
            this.calendar.currentView = 'year'
        
        this.calendar.currentView = this.calendar.currentView == 'year' ? 'multi-year' : 'year';
    }
  })
}

---

这样，您可以从标题自定义导航…

创建两个选项，一个是月份，另一个是年份。这将是最简单的解决方案。使用日历的原因主要是仅用于天数映射。例如关于DOB字段，请参阅facebook注册页面。使用selects需要多年的手动输入？@user10181542-您可以使用中建议的方法填充一个数组，并在模板中使用

*ngFor

，将这些

选项添加到
select
元素中。我对循环数年。几个月来，我会建议硬编码的名称，如果不使用，时刻获得当地的翻译，取决于要求。您是否也找到了将显示格式更改为仅显示月份和年份的方法？@VincentSels我相信这只会在选择后显示月份和年份。您也可以参考有关此问题的官方文档-
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

import {MatDatepicker} from '@angular/material/datepicker';


 @ViewChild('picker') datePickerElement = MatDatepicker;

  ngOnInit() {
    console.log(this.datePickerElement) 
    console.log(this.datePickerElement['opened'])  
   
    setTimeout(() => {
          this.datePickerElement['_datepickerInput']._dateFormats = {
  parse: {
    dateInput: 'LL', 
  },
  display: {
    dateInput: 'MMMM YYYY',
    monthYearLabel: 'MMMM YYYY', 
  },
};
    },1000)


  }

@ViewChild('datePicker') public dp;

ngAfterViewInit(): void {
  this.dp.openedStream.subscribe(async _ => {
    while (this.dp._popupComponentRef.instance._calendar == null)
      await this.__delay__(100)

    this.dp._popupComponentRef.instance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance.currentPeriodClicked = function () {        
    
        // redefine here calendar navigation in header
        
        if (this.calendar.currentView == 'month')
            this.calendar.currentView = 'year'
        
        this.calendar.currentView = this.calendar.currentView == 'year' ? 'multi-year' : 'year';
    }
  })
}