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

Question

我正在为DOB设置mat-datepicker，传统上显示格式为MM / DD / YYYY，我需要用较少的编码将其更改为DD / MM / YYYY

我在mat-date picker中尝试过format标记，但是它不起作用，其他日期选择器（如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>

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

Answer 1

有关如何显示和解析自定义格式日期的完整指南

1. 安装“@angular/material-moment-adapter”你的版本 Angular
   npm i @angular/material-moment-adapter@[your_angular_version] 找到版本

2. 安装“时刻”
   npm i moment

3. 创建有关如何显示和解析日期的配置。

const MY_DATE_FORMAT = {
  parse: {
    dateInput: 'DD/MM/YYYY', // this is how your date will be parsed from Input
  },
  display: {
    dateInput: 'DD/MM/YYYY', // this is how your date will get displayed on the Input
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

4. 导入这些模块

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

5. 提供新配置

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }

这个答案的灵感来自这个答案

Answer 2

首先，将格式绑定到您的 mat-datepicker。

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';

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }

在 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>

Answer 3

使用核心中的日期适配器

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

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

}

`

Answer 4

在您使用 mat-datepicker 的组件中试试这个

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

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('your locale'); 
}

Answer 5

我在这里结合了各种答案的一些知识后开始工作，所以我想我会巩固对我有用的东西。

角度 10：

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

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

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

如果您使用共享模块导入材料，这将更改整个站点中日期选择器的所有格式。

Answer 6

解决方案 1：您可以在单独的模块/共享模块或 app.module.ts 中声明

providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
]

解决方案2：

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

constructor(private dateAdapter: DateAdapter<Date>) {
        this.dateAdapter.setLocale('your locale'); 
}

Answer 7

最简单的方法是更改​​语言环境：

将以下内容添加到模块的providers部分：

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