如何更改角形材料日期選擇器中的日期格式？

Question

我想將默認日期格式（YYYY-MM-DD）更改為其他格式，例如（MM-DD-YYYY）。

這是我的日歷HTML結構。

 <mat-form-field class="full-width">
                        <input matInput [matDatepicker]="picker"
                               [(ngModel)]="currentDay"
                               (dateChange)="currentDayChanged()"
                               required
                               placeholder="date"
                               name="currentDay">
                        <mat-datepicker-toggle matSuffix
                                               [for]="picker">
                        </mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                    </mat-form-field>

Answer 1

有一個關於它的博客： https : //blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

（以防URL無效），例如，假設您已經在整個應用程序中使用Moment.js ，則可以創建MomentDateAdapter：

繼承一個類

class MomentDateAdapter extends DateAdapter<Moment> {
  parse(value: any, parseFormat: any): Moment {
    return moment(value, parseFormat);
  }

  // Implementation for remaining abstract methods of DateAdapter.
}

在單獨的打字稿文件中創建一個這樣的const fe：

const MOMENT_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    monthYearLabel: 'MMM YYYY',
    // See DateFormats for other required formats.
  },
};

最后在您的應用程序模塊中同時提供這兩個東西

@NgModule({
  imports: [MdDatepickerModule, ...],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MOMENT_FORMATS},
  ],
})
class AppModule {}

如果您讓我們知道您的結果，我們將不勝感激。

Answer 2

在AppModule中設置您的語言環境！

以巴西為例，

 import { LOCALE_ID } from '@angular/core'; import localePt from '@angular/common/locales/pt'; registerLocaleData(localePt, 'pt-BR'); @NgModule({ declarations: [ AppComponent ], imports: [], providers: [ { provide: LOCALE_ID, useValue: 'pt-BR' } ], bootstrap: [AppComponent] }) export class AppModule { }