同一Angular组件中两个日期选择器控件上的多日期格式

编程问答 2022-08-15

问题描述

我试图让两个日期选择器在同一视图上显示不同的日期格式。一个应显示month/year，另一个应显示month/day/year。问题在于提供程序仅注入一种格式，因此两个控件使用相同的date format。由于月/年日期选择器缺少日期，因此这导致date.getFullYear()不是函数错误。以下是我组件中的提供者部分-

providers: [
  {
    provide: DateAdapter,useClass: MomentDateAdapter,deps: [MAT_DATE_LOCALE,MAT_MOMENT_DATE_ADAPTER_OPTIONS]
  },{ provide: MAT_DATE_LOCALE,useValue: RANGE_FORMATS }
],

还有RANGE_FORMATS变量：

export const RANGE_FORMATS = {
    parse: {
        dateInput: 'MM/DD/YYYY',},display: {
        dateInput: 'MM/DD/YYYY',monthYearLabel: 'MMM DD YYYY',dateA11yLabel: 'LL',monthYeara11yLabel: 'MMMM DD YYYY',};

由于MM/DD/YYYY变量“ RANGE_FORMATS”对此进行了指定，因此页面当前显示为'dateInput'。然后，两个控件都显示month/day/year。我需要的是格式化html中显示的日期的格式，或者为每个dateInput控件使用不同的提供者datepicker。

下面是日期范围日期选择器，其格式为month/day/year-

 <div class="toolbar">

<mat-form-field appearance="fill">
   <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>

  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  
  <mat-date-range-picker #picker></mat-date-range-picker>

</mat-form-field>
<mat-date-range-picker #pickerRange></mat-date-range-picker>

下面是month/year日期选择器，它使用MM/YYYY格式-

 <div>
 <mat-card>
  <mat-card-content>
    <mat-card-title>Generate Invoice for</mat-card-title>      
    <mat-form-field color="accent">
        <mat-label>Month and Year</mat-label>
      <input matInput [matDatepicker]="dp" [formControl]="date">
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp
                      startView="multi-year"
                      (yearSelected)="chosenYearHandler($event)"
                      (monthSelected)="chosenMonthHandler($event,dp)">
      </mat-datepicker>
  </mat-form-field>
  <app-datepicker [change]="changedateinput()"></app-datepicker>
  </mat-card-content>
  </mat-card>  
 </div>

如何显示日期范围MM/DD/YYYY和月份年份日期选择器MM/YYYY？

解决方法

对于更改日历视图，请添加带有以下选项的startView-月，年或多年更多信息您可以在https://material.angular.io/components/datepicker/overview

处找到
angularangularangular-materialangular-momentmomentjs