Angular Material 2 DatePicker에 대한 사용자 지정 DateAdapter 작업.

이것은 미디엄에 대한 나의 첫 번째 블로그 게시물이며 Angular Material 과 관련된 글을 쓰는 것은 처음 입니다. Material 2 프로젝트는 재 작성되었으며 지속적으로 개발 중입니다 (베타 단계). 머티리얼 팀은 새로운 구성 요소를 출시하고 문제를 해결하며 Angular 개발자의 삶을 쉽게 만드는 데 큰 역할을하고 있습니다.

내 블로그 주제 인 Custom DateAdapter로 돌아갑니다 . 최근 프로젝트에서 사용자 지정 날짜 형식 (YYYY-MM-DD)을 제공해야하는 시나리오가있었습니다.이 형식은 날짜 선택기 구성 요소 (MM / DD / YYYY)에서 제공하는 기본 형식과 다릅니다. 문서에 따르면 사용자 지정 날짜 형식 (모든 형식 일 수 있음)을 만드는 것은 DateAdapter를 확장하는 것만 큼 쉽습니다 (저를 믿으세요, 쉽지 않았습니다.). 웹 사이트에서 해당 예제를 아직 사용할 수 없습니다. . 그래서 Github 문제 페이지 인 Stackoverflow에서 약간의 검색을 수행하고 많은 예제를 통해 자체 Custom DateAdapter를 구현하는 방법을 알아 냈습니다.

여기서 공유하고 싶은 date-picker.module 파일을 만들었습니다. 이것은 인터넷에서 구할 수없는 것이 아닙니다. 단지 그것을 알아내는 데 시간이 걸렸기 때문에 사용자 지정 날짜 어댑터를 만들고자하는 사람에게이 모듈을 예제로 사용하는 것이 좋을 것이라고 생각했습니다.

// Custom DateAdapter
import {NgModule} from '@angular/core';
import {MdDatepickerModule, MdNativeDateModule, NativeDateAdapter, DateAdapter, MD_DATE_FORMATS} from '@angular/material';

// extend NativeDateAdapter's format method to specify the date format.
export class CustomDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
      if (displayFormat === 'input') {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();
         // Return the format as per your requirement
         return `${year}-${month}-${day}`;
      } else {
         return date.toDateString();
      }
   }
   
   // If required extend other NativeDateAdapter methods.
}

const MY_DATE_FORMATS = {
   parse: {
      dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
      dateInput: 'input',
      monthYearLabel: {year: 'numeric', month: 'short'},
      dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
      monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

@NgModule({
   declarations: [],
   imports: [],
   exports: [MdDatepickerModule, MdNativeDateModule],
   providers: [
      {
         provide: DateAdapter, useClass: CustomDateAdapter
      },
      {
         provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS
      }
   ]
})

export class DatePickerModule {

}

Angular 팀 전체를 응원 합니다.

이것은 내 첫 블로그 게시물입니다. 피드백 / 제안이 있거나 오류를 발견하면 알려주십시오. 감사!