Angular의 날짜 선택기

1. Angular에서 날짜 선택기 사용하기
2. input 태그를 사용하여 Angular에서 간단한 날짜 선택기 만들기
3. onChange 이벤트를 사용하여 Angular에서 날짜 선택기의 선택된 날짜 가져오기
4. onClick 이벤트를 사용하여 버튼을 Angular로 클릭한 후 날짜 저장
5. DatePipe를 사용하여 Angular의 날짜 선택기에서 날짜 형식 변경

예제와 함께 Angular 애플리케이션에 날짜 선택기를 추가하는 쉬운 방법을 소개합니다.

또한 Angular에서 날짜 선택기를 표시하기 위해 Angular 날짜 선택기 라이브러리를 소개합니다.

Angular에서 날짜 선택기 사용하기

현대의 관리 시스템에서 날짜 선택 도구는 가장 일반적인 양식 요소 중 하나입니다. 날짜 선택기를 사용하면 사용자가 생년월일이나 이벤트 날짜와 같은 알려진 날짜를 선택할 수 있습니다.

날짜 선택기를 사용하면 사용자 정의 사용자 인터페이스에서 일, 월 및 연도로 구성된 날짜를 선택할 수 있습니다. 입력 양식 요소의 변형입니다.

날짜 선택기를 사용하여 onChange 및 onSubmit 이벤트에서 선택한 날짜를 선택하고 가져오는 방법을 이해하기 위해 예제를 살펴보겠습니다.

이러한 이벤트의 차이점은 필드가 두 개 이상인 경우 onSubmit 이벤트 형식에서 값을 가져오는 것이 더 낫다는 것입니다.

그러나 날짜 선택 도구만 있고 사용자가 날짜를 선택한 후 날짜를 가져오려면 onChange 이벤트를 사용하여 값을 가져올 수 있습니다.

input 태그를 사용하여 Angular에서 간단한 날짜 선택기 만들기

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

이제 input 태그를 사용하여 app.component.html 파일에 날짜 선택기를 생성합니다.

# Angular
<input type="date" />

이 한 줄의 코드는 아래와 같이 날짜 선택기를 생성합니다.

출력:

따라서 이 간단한 한 줄의 코드를 사용하여 이러한 유형의 날짜 선택기를 만들 수 있습니다. 이제 날짜를 선택할 때마다 선택한 날짜를 가져오도록 하겠습니다.

onChange 이벤트를 사용하여 Angular에서 날짜 선택기의 선택된 날짜 가져오기

app.component.ts에서 event를 매개변수로 사용하고 console.log를 선택한 데이터로 사용하는 SendDataonChange 기능을 생성합니다.

# Angular
SendDataonChange(event: any) {
console.log(event.target.value);
}

이제 날짜가 변경될 때마다 실행되는 이 기능을 템플릿에 설정해 보겠습니다.

# Angular
<input type="date" (change)="SendDataonChange($event)" />

출력:

onClick 이벤트를 사용하여 버튼을 Angular로 클릭한 후 날짜 저장

버튼을 클릭한 후 날짜를 저장하고 싶다고 가정합니다. app.component.html에 버튼을 생성하고 app.component.ts에 생성된 onClick() 함수로 이를 바인딩할 수 있습니다.

따라서 app.component.html의 코드는 아래와 같습니다.

# Angular
<input type="date" (change)="SendDataonChange($event)" />
<br>
<button (click)="onClick()">Change</button>

날짜 선택기를 [(ngModel)]로 바인딩해야 합니다. 따라서 우리의 코드는 아래와 같을 것입니다.

# Angular
<input type="date" (change)="SendDataonChange($event)" [(ngModel)]="changed" />
<br>
<button (click)="onClick()">Change</button>

이제 버튼과 날짜 선택기를 우아하게 보이도록 CSS를 추가해 보겠습니다. 따라서 app.component.css의 코드는 다음과 같습니다.

# Angular
button {
padding: 10px;
background-color: black;
border: none;
color: white;
margin-top: 10px;
}
input{
padding: 5px;
font-size: 15px;
}

출력:

app.component.ts에서 날짜 선택기를 바인딩할 변수를 정의합니다.

# Angular
changed: Date;

이제 버튼을 클릭하면 날짜 선택기의 값을 console.log하는 onClick 함수를 생성합니다.

# Angular
onClick() {
console.log(this.changed);
}

출력:

DatePipe를 사용하여 Angular의 날짜 선택기에서 날짜 형식 변경

이제 날짜 형식을 변경하는 방법에 대해 논의해 보겠습니다.

최고의 소프트웨어 개발자가 효율적이고 오류 없이 작동하도록 소프트웨어를 개발하기 때문에 많은 개발자가 다양한 날짜 형식으로 작업하는 데 어려움을 겪고 있습니다.

날짜 형식을 변경하는 가장 좋은 방법은 날짜를 저장하고 검색하는 함수를 만드는 것입니다. 따라서 데이터베이스의 형식은 그대로 유지되지만 함수를 사용하여 필요한 형식으로 쉽게 표시할 수 있습니다.

먼저 아래와 같이 app.component.ts에 DatePipe를 가져옵니다.

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

이제 형식이 변경되고 반환된 후 날짜 값을 저장하는 데 사용할 새 변수 newDate를 정의합니다.

changed를 매개변수로 사용하고 DatePipe를 사용하여 날짜 형식을 필요한 형식으로 변환하는 changeFormat() 함수를 만들어 보겠습니다.

날짜의 시간대를 저장할 변수 pipe를 정의합니다.

app.component.ts의 코드는 다음과 같습니다.

# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
changed: Date;
pipe = new DatePipe('en-US');
newDate: string;
changeFormat(changed){
let ChangedFormat = this.pipe.transform(this.changed, 'dd/MM/YYYY');
this.newDate = ChangedFormat;
}

onClick() {
console.log(this.changed);
}
SendDataonChange(event: any) {
console.log(event.target.value);
}
}

이제 onClick() 및 console.log 함수의 날짜 값을 새 형식으로 새 날짜 값으로 전달합니다.

# Angular
onClick() {
this.changeFormat(this.changed);
console.log(this.newDate);
}

출력:

위의 예에서 볼 수 있듯이 날짜를 선택하면 2022-01-19가 표시되지만 버튼을 클릭하면 onClick() 함수 내에서 changeFormat() 함수를 호출하고 변경된 형식의 날짜를 반환합니다.

이러한 방식으로 애플리케이션에서 날짜 선택기를 사용하여 날짜 선택 시 날짜 값을 저장하거나 버튼을 클릭할 때 값을 저장할 수 있습니다. 또한 DatePipe를 사용하여 날짜 형식을 변경하는 방법도 배웠습니다.

전체 코드는 여기에서 확인할 수 있습니다.