Блог

Я пытаюсь получить два набора дат для отображения форматов дат, которые отличаются в одном представлении. Один должен отображаться month/year , а другой month/day/year . Проблема в том, что поставщик вводит только один формат, поэтому оба элемента управления используют один и тот же date format . Это вызывает date.getFullYear() не функциональную ошибку, поскольку в окне выбора даты месяца / года отсутствует день. Ниже приведен раздел provider в моем компоненте-

 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 datepicker, который использует 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 с опцией — месяц, год или многолетний <mat-datepicker #picker1 startView=»year»> более подробную информацию Вы найдете здесьhttps://material.angular.io/components/datepicker/overview