时间戳

首页 > 解决方案 > 同一Angular组件中两个日期选择器控件上的多种日期格式

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

问题描述

我试图让两个日期选择器在同一视图上显示不同的日期格式。一个应该显示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使用不同的提供程序。dateInputdatepicker

以下是日期范围日期选择器，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？

标签： angularangular-materialmomentjsangular-moment

解决方案

要更改日历视图，请添加带有选项的 startView - 月、年或多年 <mat-datepicker #picker1 startView="year"> 更多信息您可以在此处找到https://material.angular.io/components/datepicker/overview

推荐阅读