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

时间:2019-04-17 06:31:25

标签: angular angular-material

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

我在mat-date选取器中尝试了格式标签,但是它不起作用,其他日期选择器(例如ngbDatepicker格式)可以通过一行编码轻松更改

  <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格式

10 个答案:

答案 0 :(得分:5)

使用核心的dateadapter

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

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

}

`

答案 1 :(得分:2)

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

将以下内容添加到模块的提供者部分:

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

答案 2 :(得分:1)

我结合了这里各种答案的知识后,它开始工作了,所以我认为我应该巩固对我有用的东西。

角度10:

在您的模块中,导入MAT_DATE_LOCALE并将其添加到提供商:

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

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

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

答案 3 :(得分:1)

对我来说,最好的方法是将 MAT_DATE_FORMATS 注入我的组件,然后动态确定显示格式应该是什么样子。

在组件中设置:

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

答案 4 :(得分:0)

如果您想更好地控制日期格式,可以使用自定义日期适配器,如下所示:

https://stackblitz.com/edit/angular-83pwdp

答案 5 :(得分:0)

在您使用mat-datepicker的组件中尝试一下

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

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

答案 6 :(得分:0)

首先,将格式绑定到您的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: DateFormats }

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

答案 7 :(得分:0)

添加到提供商列表中:

{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},

答案 8 :(得分:0)

如果要将 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));
    }
});

mEt_last_date_to_apply 是我的 EditText

答案 9 :(得分:-1)

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