각도 재료 날짜/시간 선택기

이것은 누구를 위한 것입니까?

이 튜토리얼은 애플리케이션에 datetime picker를 통합하려는 Angular 개발자를 위한 것입니다. Angular Material 날짜/시간 선택기는 Angular 버전 7 - 14에서 사용할 수 있습니다.

우리는 angular에 사용할 수 있는 datetime picker가 거의 없으며 그 중 하나는 사용하기 쉽고 UI/UX가 좋은 Angular Material Datetime picker입니다. 그래서 우리는 그것들을 angular에서 통합하는 방법을 볼 것입니다.

npm 패키지 - https://www.npmjs.com/package/@angular-material-components/datetime-picker



위의 패키지는 시간 선택기를 추가하여 Angular material Datepicker의 기능을 확장합니다.

1단계: 필수 npm 패키지 추가

아래 단계에 따라 필요한 패키지를 설치하십시오.

//Angular material & datetime picker
npm install --save @angular/material
npm install --save  @angular-material-components/datetime-picker

//Add moment related packages since we are using to parse the date
npm install moment
npm install --save @angular/material-moment-adapter
npm install @angular-material-components/moment-adapter
//Others
npm install @angular/platform-browser

Angular 자료를 설치한 다음 datetime picker 패키지를 설치하십시오. moment은 다양한 구문 분석 형식과 다른 로케일을 지원하므로 관련 패키지와 함께 동일하게 설치합니다.
Note: 당사의 Angular 애플리케이션은 버전 14를 기반으로 Angular Material Datetime Picker 버전 8.x+를 설치하고 있습니다. 다른 Angular 버전이 있는 경우 위 npm 페이지를 참조하여 해당 버전을 설치하십시오.

2단계: NgModule이 날짜 형식으로 변경됩니다.

아래와 같이 NgModule 가져오기 및 공급자 섹션을 업데이트합니다.

imports: [
    ...
    FormsModule,  //Required for form controls
    MatDatepickerModule, //Material datepicker module
    NgxMatDatetimePickerModule, //Datetime picker module
    MatInputModule, //Required for material input 
    BrowserAnimationsModule //Required for animation
  ],
  providers: [
...
{
    provide: NgxMatDateAdapter,
    useClass: NgxMatMomentAdapter, //Moment adapter
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
  },
{ provide: NGX_MAT_DATE_FORMATS, useValue: MY_NGX_DATE_FORMATS }]

사용자 정의NGX_MAT_DATE_FORMATS를 제공하여 날짜/시간 선택기 형식을 사용자 정의하고 있습니다. NgModule 파일 또는 각도의 다른 위치에서 사용자 지정 형식 값 아래에 선언할 수 있습니다.

const MY_NGX_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "DD.MM.yyyy HH:mm",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

3단계: 테마 지정 및 기타 사용자 지정

재료 테마 또는 사용자 정의 테마를 syles.css 파일로 가져옵니다.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

글꼴 및 아이콘 지원을 받으려면 index.html에 머티리얼 디자인 아이콘 글꼴 아래를 추가하세요.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

4단계: Angular 구성 요소에서 사용

필요한 모든 패키지 가져오기를 완료하고 NgModule에서 동일하게 구성했습니다. 이제 아래 코드를 사용하여 Angular 구성 요소 html에 날짜/시간 선택기를 추가할 수 있습니다.

<mat-form-field>
  <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [(ngModel)]="selectedDate">
  <mat-datepicker-toggle matSuffix [for]="$any(picker)">
  </mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="true">
  </ngx-mat-datetime-picker>
</mat-form-field>
<br>
Moment Date - {{selectedDate}} <br>
Javascript Date - {{selectedDate?.toDate()}}

아래와 같이 typescript 파일에서 기본값으로 datetime picker 모델을 선언합니다.

selectedDate?: moment.Moment = moment(new Date());

그게 다야, 우리는 성공적으로 Angular 자료 Datetime 선택기를 통합했습니다. 이제 ng serve로 애플리케이션을 실행하고 모든 것이 제대로 작동하는지 확인할 수 있습니다.

github에서 전체 코드를 확인하십시오.

5단계: 사용자 지정 및 추가 옵션

여기에서는 기본 기능이 있는 각도 응용 프로그램에서 날짜/시간 선택기를 통합하는 방법을 보여 주었습니다. Timepicker에도 동일한 단계를 적용할 수 있습니다.

추가 옵션 및 추가 사용자 지정에 대해서는 위의 npm 페이지를 참조할 수 있습니다.

즐거운 코딩하세요 😊