Angular-Material DateTime Picker 컴포넌트
datepicker 구성 요소는 개인 정보 양식을 작성하는 상황에서 사용되는 구성 요소 중 하나입니다.
페이지에서 생년월일을 선택하거나 작업을 시작하고 작업을 종료한 날짜를 채우려는 경우에 사용되는 구성 요소입니다.
우리는 웹 페이지에서 DateTime 선택기 구성 요소를 보는 다양한 인스턴스를 접하게 됩니다. 이제 Angular 재료 종속성을 사용하여 구현하는 방법을 알아보겠습니다.
Angular 재료 종속성을 사용하는 DateTime 선택기
Angular 재료 UI는 바로 사용할 수 있는 구성 요소의 goto 라이브러리이며 DateTime 선택기를 만드는 데 배포합니다.
새 Angular 프로젝트를 만든 후 프로젝트 폴더를 탐색하고 ng add @angular/material을 사용하여 재료를 설치합니다. 이제 코딩 부분으로 이동하여 src>>app로 이동하여 app.component.html 파일을 찾고 다음 코드를 입력합니다.
app.component.html의 코드 스니펫:
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
여기에서는 DateTime 선택기 구성 요소의 기본 구조와 동작을 생성합니다.
Angular 자료에서 app.module.ts 파일로 일부 종속성을 가져와야 합니다. DateTime 선택기 구성 요소 기능을 수행합니다.
app.module.ts의 코드 스니펫
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
여기에서 수행한 작업은 필요한 종속 항목을 app.module.ts로 가져오는 것입니다. app.component.ts 파일 내부를 변경하지 않을 것이므로 그대로 두겠습니다.
이렇게 하면 다음과 같은 결과를 얻을 수 있습니다.
DateTime 선택기 구성 요소를 만드는 다른 방법
다양성, 탐색 및 학습을 위해 DateTime 선택기 구성 요소를 디자인하는 데 사용할 수 있는 다른 방법을 살펴보겠습니다.
ng-bootstrap 라이브러리가 있는 DateTime 선택기 구성요소
Angular 자료와 마찬가지로 ng-bootstrap은 Angular 프레임워크에 대한 위젯과 종속성을 제공하는 인기 있는 라이브러리입니다. DateTime 선택기 구성 요소를 구현하는 것만큼 쉽습니다.
우리가 만든 새로 만든 Angular 응용 프로그램의 프로젝트 폴더 안에 ng add @ng-bootstrap/ng-bootstrap을 입력하여 ng-bootstrap을 설치합니다.
그런 다음 구성 요소의 구조와 동작부터 시작합니다. app.component.html 파일로 이동하여 코드로 생성합니다.
app.component.html의 코드 스니펫:
<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>
이 코드를 사용하면 선택한 날짜가 구성 요소 아래에 표시됩니다. 이 동작은 마지막 두 줄의 코드로 생성됩니다.
이제 DateTime 선택기 구성 요소의 기능에 집중해야 합니다. 이를 위해 app.component.ts 파일로 이동하여 이 코드를 입력합니다.
app.component.ts의 코드 스니펫:
import {Component} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'timetwo';
model: NgbDateStruct;
date: {year: number, month: number};
constructor(private calendar: NgbCalendar) {
}
selectToday() {
this.model = this.calendar.getToday();
}
}
이 코드로 수행하는 작업은 날짜를 선택할 때 selectToday() 함수가 app.component.html 내부의 모델을 활성화하도록 DateTime 선택기 구성 요소의 동작을 정의하는 것입니다. 우리가 선택한 날짜 밖으로.
마지막 부분은 ng-bootstrap에서 설치한 종속성을 관리하는 것입니다. app.module.ts 파일 내에서 이러한 코드를 생성합니다.
app.module.ts의 코드 스니펫
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
이 섹션에 대한 모든 코드를 작성하면 다음과 같은 출력이 표시됩니다.
ng2 NPM을 사용하는 DateTime 선택기
우리가 작업하고자 하는 마지막 방법은 Angular 프레임워크에 대해 고도로 구성 가능한 날짜 선택기 구성 요소를 제공하는 ng2 라이브러리입니다.
새 프로젝트 폴더 안에 npm i ng2-date-picker를 입력하여 ng2 라이브러리를 설치합니다. 설치 후 app.component.html 파일로 이동하여 웹페이지의 구조와 동작을 디자인하는 코드를 입력합니다.
app.component.html의 코드 스니펫:
<dp-date-picker theme="dp-material"
[config]="datePickerConfig" required="true">
</dp-date-picker>
<br />
<input type="button" (click)="updateFormat()" value="update date picker format" />
<br />
format : {{datePickerConfig.format}}
이제 app.component.ts 파일로 이동하여 더 많은 코딩을 수행하여 DateTime 선택기 구성 요소에 기능을 가져옵니다.
app.component.ts의 코드 스니펫:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from "@angular/forms";
import moment from 'moment'
import { IDayCalendarConfig, DatePickerComponent } from "ng2-date-picker";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'timethree';
datePickerConfig = {
format: 'DD'
};
updateFormat() {
console.log('update')
this.datePickerConfig = {
...this.datePickerConfig,
format: 'DD-MM-YYYY'
}
}
}
먼저 ng2 모듈 중 일부를 app.component.ts 파일로 가져옵니다. 나머지 모듈을 app.module.ts 파일로 가져옵니다.
그런 다음 updateFormat() 함수를 사용하여 DateTime 선택기 구성 요소에서 선택한 날짜를 표시합니다.
다음은 ng2 라이브러리에서 필요한 나머지 모듈을 가져오는 app.module.ts 파일에서 작업하는 것입니다.
app.module.ts에 대한 코드 스니펫:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DpDatePickerModule } from "ng2-date-picker";
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, DpDatePickerModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
마지막으로 앱이 작동하도록 하려면 프로젝트 폴더의 tsconfig.json 파일 내에 "allowSyntheticDefaultImports": true 구성을 추가해야 합니다.
섹션의 모든 단계를 성공적으로 수행하면 다음 출력이 표시됩니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn