Angular 如何以最简单的方式将Mat Datepicker日期格式更改为DD/MM/YYYY？

我正在为DOB设置一个mat日期选择器，传统的显示格式是MM/DD/YYYY，我需要将其更改为DD/MM/YYYY，代码更少

我在mat date picker中尝试了format tag，但它不起作用，其他日期选择器（如ngbDatepicker format）可以通过一行编码轻松更改

  <div class="col-md-3 Dinline-block">
     <mat-form-field>
        <input matInput [matDatepicker]="picker2" [max]="currentDate" 
         placeholder="DOB(DD/MM/YYYY)" required formControlName="dob" 
          readonly />
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker- 
         toggle>
        <mat-datepicker #picker2></mat-datepicker>
     </mat-form-field>
  </div>

---

从mat日期选择器中选择后显示的日期应为DD-MM-YYYY，从日期选择器中检索值时也应为DD-MM-YYYY格式

最简单的方法是更改区域设置：

将以下内容添加到模块的“提供程序”部分：

{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }

---

在使用mat datepicker的组件中尝试此操作

从'@angular/material'导入{DateAdapter}；
构造函数（专用日期适配器：日期适配器）{
this.dateAdapter.setLocale（“您的区域设置”）；
}

首先，将格式绑定到mat日期选择器

export const MY_FORMATS = {
    parse: {
        dateInput: 'LL'
    },
    display: {
        dateInput: 'YYYY-MM-DD',
        monthYearLabel: 'YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'YYYY'
    }
};

除此之外，您还需要导入并提供模块

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

在HTML中，请简单地遵循这一点

<mat-form-field>
    <input
        matInput
        [matDatepicker]="dp"
        placeholder="Verbose datepicker
        [formControl]="date"
    >
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

添加到提供者列表：

{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},

从core使用dateadapter

import { DateAdapter } from '@angular/material/core';

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('en-GB'); //dd/MM/yyyy

}

从'@angular/material/core'导入{DateAdapter}；
构造函数（专用日期适配器：日期适配器）{
this.dateAdapter.setLocale（'en-GB'）；//dd/MM/yyyy
}

`
我把这里的各种答案中的一些知识结合起来后，它开始工作了，所以我想我应该巩固对我有用的东西

角度10：
在您的模块中，导入MAT_DATE_LOCALE并将其添加到提供程序：

import { MAT_DATE_LOCALE } from '@angular/material/core'

@NgModule({
  declarations: [...],
  imports: [...],
  exports: [...],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ]
})

如果您使用共享模块导入材料，这将更改整个站点中日期选择器的所有格式。
对于我来说，最好的方法是将
MAT_DATE_格式
注入到我的组件中，然后动态确定显示格式

formatDate(Date(), "yyyy-MM-dd", 'en-GB')

组件中的设置：

  constructor(@Inject(MAT_DATE_FORMATS) private dateFormats) { }

  ngOnInit() {
    if (this.data.inputType === InputDateDialogRangeType.MonthAndYearOnly)
      this.dateFormats.display.dateInput = "MMMM YYYY";
    else if (this.data.inputType === InputDateDialogRangeType.YearOnly)
      this.dateFormats.display.dateInput = "YYYY";           
  }

模块中的设置：

 providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

export const MY_DATE_FORMAT = {
  display: {
    dateInput: 'DD MMM YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

如果要将MaterialDatePicker日期格式更改为yyyy mm dd，请使用以下代码。这个代码对我有用

MaterialDatePicker<Long> materialDatePicker=materialDateBuilder.build();
materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener<Long>() {
    @Override
    public void onPositiveButtonClick(Long selection) {
        // Get the offset from our timezone and UTC.
        TimeZone timeZoneUTC = TimeZone.getDefault();
        // It will be negative, so that's the -1
        int offsetFromUTC = timeZoneUTC.getOffset(new Date().getTime()) * -1;
        // Create a date format, then a date object with our offset
        SimpleDateFormat simpleFormat = new SimpleDateFormat("yyyy-MM-dd", Locale.US);
        Date date = new Date(selection + offsetFromUTC);

        mEt_last_date_to_apply.setText(simpleFormat.format(date));
    }
});

MaterialDatePicker MaterialDatePicker=materialDateBuilder.build（）；
materialDatePicker.addOnPositiveButtonClickListener（新MaterialPickerOnPositiveButtonClickListener（））{
@凌驾
public void onPositiveButtonClick（长选择）{
//获取时区和UTC的偏移量。
TimeZone timeZoneUTC=TimeZone.getDefault（）；
//它将是负数，所以这是-1
int offsetfromtc=timeZoneUTC.getOffset（new Date（）.getTime（））*-1；
//创建一个日期格式，然后创建一个带有偏移量的日期对象
SimpleDataFormat simpleFormat=新的SimpleDataFormat（“yyyy-MM-dd”，Locale.US）；
日期日期=新日期（选择+从UTC偏移）；
mEt_last_date_to_apply.setText（simpleFormat.format（date））；
}
});

mEt_last_date_to_apply is my EditText
此方法等于
{provide:MAT_date_LOCALE，useValue:'en GB'}
在模块的providers数组中设置。不同之处在于，您的方法使用
.setLocale（）
函数在运行时设置它。最好了解所有选项并获得更多知识。查看并搜索
国际化
。请不要只发布代码作为答案，还要解释代码的作用以及如何解决问题。带有说明的答案通常更有帮助，质量更好，并且更有可能吸引更多的投票。您需要将此代码添加到正在使用的模块中。应导入MAT_DATE_LOCAL，请解释缺失的点：）
MaterialDatePicker<Long> materialDatePicker=materialDateBuilder.build();
materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener<Long>() {
    @Override
    public void onPositiveButtonClick(Long selection) {
        // Get the offset from our timezone and UTC.
        TimeZone timeZoneUTC = TimeZone.getDefault();
        // It will be negative, so that's the -1
        int offsetFromUTC = timeZoneUTC.getOffset(new Date().getTime()) * -1;
        // Create a date format, then a date object with our offset
        SimpleDateFormat simpleFormat = new SimpleDateFormat("yyyy-MM-dd", Locale.US);
        Date date = new Date(selection + offsetFromUTC);

        mEt_last_date_to_apply.setText(simpleFormat.format(date));
    }
});