매트 날짜 선택기 날짜 형식을 DD/MM/YYY로 가장 간단한 방법으로 변경하는 방법은 무엇입니까?

매트 날짜 선택기 날짜 형식을 DD/MM/YYY로 가장 간단한 방법으로 변경하는 방법은 무엇입니까?

DOB에 대한 mat-date picker를 설정하고 있으며, 전통적으로 표시 형식은 MM/DD/YYY이며, 코딩이 적은 DD/MM/YYY로 변경해야 합니다.

포맷 태그를 포맷 날짜 선택기로 시도했지만 작동하지 않습니다. 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-YYY여야 하며 날짜 선택기에서 값을 검색할 때도 DD-MM-YYY 형식이어야 합니다.

가장 쉬운 방법은 로케일을 변경하는 것입니다.

모듈의 공급자 섹션에 다음을 추가합니다.

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

먼저 형식을 날짜 선택기에 바인딩합니다.

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>

사용자 지정 형식으로 날짜를 표시하고 구문 분석하는 방법에 대한 전체 가이드

1. "@angular/material-moment-adapter" 버전을 설치합니다.
   npmi @filename/material-filename-filename@[ your_filename_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 }

이 답변은 이 답변에서 영감을 받았습니다.

코어에서 날짜 어댑터 사용

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

constructor(private dateAdapter: DateAdapter<Date>) {
    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' }
  ]
})

공유 모듈을 사용하여 재료를 가져오면 사이트 전체에서 날짜 선택기의 모든 형식이 변경됩니다.

날짜 선택 도구를 사용 중인 구성 요소에서 이 작업을 시도합니다.

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

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

솔루션 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'); 
}

당신이 100% 통제를 원할 경우를 대비해서 제가 date-fns를 계속 사용해서 생각해 낸 해결책입니다.

요소

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: ["dd.MM.yyyy", "dd/MM/yyyy", "dd,MM,yyyy"], // to accept different input styles from user
  },
  display: {
    dateInput: "dd.MM.yyyy", // display format in input field
    monthYearLabel: 'yyyy MMMM',
    dateA11yLabel: 'MMMM d, y',//'LL',
    monthYearA11yLabel: 'MMMM yyyy'
  },
};

@Component({
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: nb },
    { provide: DateAdapter, useClass: YourCustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})

어댑터

DateFnsAdapter는 parseISO()를 사용하기 때문에 나는 나만의 어댑터를 작성해야 했고, 그것은 내가 원하는 것이 아닙니다.내가 해야 할 일은 구문 분석을 무시하는 것뿐입니다.

@Injectable()
export class YourCustomDateAdapter extends DateFnsAdapter {

  //this parses date from input field
  override parse(value: any, parseFormat: string | string[]): Date | null {
    if (typeof value == 'string' && value.length > 0) {
      if (!parseFormat.length) throw Error('Formats array must not be empty.');

      for (const currentFormat of parseFormat) {
        const fromFormat = parse(value, currentFormat, new Date(), {locale: this.locale});

        if (this.isValid(fromFormat)) {
          return fromFormat;
        }
      }

      return this.invalid();
    } else if (typeof value === 'number') {
      return new Date(value);
    } else if (value instanceof Date) {
      return this.clone(value);
    }

    return null;
  }
}

요소

마지막 퍼즐은 날짜 선택기 구성 요소의 출력 형식을 제어하는 방법입니다.입력 필드에 FormControl을 사용하는 것을 선호합니다(원하신다면 ngModel + ngModelChanges로도 가능합니다).

@Input() config: DateFormatOutputFNS = DateFormatOutputFNS["yyyy-mm-dd"];    
this.local_control.valueChanges.subscribe(v => {
    
      if (isValid(v)){ //to avoid sending output as user type into input field
        if (this.withinRange(v)){ // add you validation logic as you like
          this.control.setValue(format(v, this.config))
          this.control.markAsDirty()
          this.control.markAsTouched()
        }
      }

})

구성 옵션

위의 .config를 참조하십시오.date-fns 형식에 따라 원하는 대로 출력 형식 옵션 추가

export enum DateFormatOutputFNS {
  "yyyy-mm-dd" = "yyyy-MM-dd",
  "yyyy-mm-ddT00:00:00Z" = "yyyy-MM-dd\'T\'HH:mm:ss\'Z\'",
}

저에게 가장 좋은 방법은 주사를 놓는 것이었습니다.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',
  },
};

MomentDateAdapter v8.1.4는 각진 v12.2.0을 실행하는 프로젝트에서 잘 작동합니다.그러나 MomentDateAdapter 버전 12.2에서 13.2 사이의 버전을 사용할 수 없었습니다. V8.1.4는 정상적으로 작동하는 것 같습니다.

다음은 앱 모듈에서 사용한 가져오기 배열입니다.

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

export const DATE_FORMATS = {
    parse: {
        dateInput: 'DD.MM.YYYY',
    },
    display: {
        dateInput: 'DD.MM.YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

providers: [
        { provide: DateAdapter, useClass:MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
        { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
        { provide: LOCALE_ID, useValue: 'de-DE' }, // for German translation. Ignore this if not needed.
    ],

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가 내 편집 텍스트입니다.

각도 12 테스트 완료.

아래 코드 청크에서 생성자에 날짜 파이프를 주입한 다음 이를 사용하여 날짜 컨트롤의 날짜 형식을 변환하는 방법을 볼 수 있습니다.이 솔루션의 가장 좋은 점은 로케일 제한에 관계없이 원하는 날짜를 자유롭게 지정할 수 있다는 것입니다.

import { DatePipe } from '@angular/common';

export class SomeComponent {

myDatepipe!: any;

constructor(private fb: FormBuilder, datepipe: DatePipe)
{
     this.myDatepipe = datepipe;
     this.someForm = this.fb.group({
         someDateControl : new FormControl()
         }); 
    
}

SomeAction()
{
 if(this.someForm.value.someDateControl)
    {
         const ConvertedDate = this.myDatepipe.transform(this.someForm.value.someDateControl, 'yyyy-MM-dd');
    }
}


}

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

 constructor( private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('sv-se');
   
  }

여기에 이미지 설명 입력

공급자 목록에 추가:

{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},

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

언급URL : https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way