Angular 날짜 선택기 구성 요소 개요
Angular Date Picker는 수동 텍스트 입력을 통해 날짜를 입력하거나 팝업되는 달력 대화 상자에서 날짜 값을 선택하는 데 사용되는 기능이 풍부한 구성 요소입니다. 가볍고 사용하기 쉬운 Angular의 Date Picker를 사용하면 사용자가 여러 가지 보기 옵션(월, 년, 10년)으로 원하는 날짜로 이동할 수 있습니다. 유효성 검사를 추가하기 위한 일반적인 min, max 및 필수 속성이 있습니다.
Ignite UI for Angular Date Picker Component를 사용하면 월별 보기 캘린더 드롭다운 또는 편집 가능한 입력 필드를 통해 단일 날짜를 선택할 수 있습니다. Angular Date Picker는 달력에서만 선택할 수 있는 대화 상자 모드, 로캘 인식 및 사용자 지정 가능한 날짜 형식 및 유효성 검사 통합도 지원합니다.
Angular 날짜 선택기 예제
아래에서는 사용자가 수동 텍스트 입력을 통해 날짜를 선택하고 왼쪽의 달력 아이콘을 클릭하여 해당 날짜로 이동할 수 있는 경우 Angular 날짜 선택기가 작동하는 방식을 보여 주는 샘플을 볼 수 있습니다. 렌더링하는 방법을 참조하십시오.
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular 날짜 선택기 시작하기
Ignite UI for Angular Date Picker 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 IgxDatePickerModule
당신의 app.module.ts 파일.
선택기는 IgxCalendarComponent를 사용하므로 BrowserAnimationsModule 및 선택적으로 터치 상호 작용을 위한 HammerModule 에도 종속되므로 모듈에도 추가해야 합니다.
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxDatePickerModule } from 'igniteui-angular';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule],
...
})
export class AppModule {}
typescript
또는 16.0.0
부터 IgxDatePickerComponent
독립 실행형 종속성으로 가져오거나 IGX_DATE_PICKER_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.
// home.component.ts
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-date-picker>
<label igxLabel>Date</label>
</igx-date-picker>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
/* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
})
export class HomeComponent {}
typescript
이제 Ignite UI for Angular 가져왔으므로 igx-date-picker
구성 요소를 사용할 수 있습니다.
Angular 날짜 선택기 구성 요소 사용
날짜 선택기 표시
날짜 선택기를 기본 dropdown
상태로 인스턴스화하려면 다음 코드를 사용합니다.
<igx-date-picker>
<label igxLabel>Date</label>
</igx-date-picker>
html
옵션
IgxDatePickerComponent
는 date
또는 string
에 바인딩될 수 있습니다.
<igx-date-picker [value]="date"></igx-date-picker>
html
public date = new Date(2000, 0, 1);
typescript
문자열이 선택기에 바인딩된 경우 ISO 8601
형식의 날짜 전용 문자열이어야 합니다.
<igx-date-picker [value]="'2000-01-01'"></igx-date-picker>
html
이에 대한 자세한 내용은 DateTime Editor의 ISO 섹션에서 확인할 수 있습니다.
ngModel
통해 양방향 바인딩이 가능합니다.
<igx-date-picker [(ngModel)]="date"></igx-date-picker>
html
뿐만 아니라 value
입력을 통해서도 다음과 같습니다.
<igx-date-picker [(value)]="date"></igx-date-picker>
html
또한 formControlName
선택기에 설정하여 반응형 형식으로 사용할 수 있습니다.
<form [formGroup]="form">
<igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>
html
export class SampleFormComponent {
// ...
public form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
datePicker: ['', Validators.required]
});
}
}
typescript
선택기는 항상 Date
값을 반환합니다. 즉, 모델 바인딩되거나 문자열 변수에 양방향 바인딩된 경우 새 날짜를 선택한 후 Date
유형이 됩니다.
투영 구성요소
IgxDatePickerComponent
사용하면 IgxInputGroupComponent
가 지원하는 하위 구성요소(IgxInput
제외)(igxLabel
, igx-hint / IgxHint
, igx-prefix / igxPrefix
, igx-suffix / igxSuffix
)를 프로젝션할 수 있습니다. 이에 대한 자세한 내용은 레이블 및 입력 항목에서 확인할 수 있습니다.
<igx-date-picker #datePicker>
<igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>
html
위의 스니펫은 입력 끝의 기본 지우기 아이콘 바로 뒤에 추가 토글 아이콘을 추가합니다. 이렇게 하면 기본 토글 아이콘이 제거되지 않지만 접두사와 접미사를 차례로 쌓을 수 있습니다.
토글 및 지우기 아이콘 사용자 정의
and IgxPickerClearComponent
로 IgxDatePickerComponent
IgxPickerToggleComponent
구성할 수 있습니다. 이들은 토글을 변경하고 자신의 클릭 처리기를 추가할 필요 없이 아이콘을 지우는 데 사용할 수 있습니다.
<igx-date-picker>
<label igxLabel>Select a Date</label>
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_view_day</igx-icon>
</igx-picker-toggle>
<igx-picker-clear igxSuffix>
<igx-icon>delete</igx-icon>
</igx-picker-clear>
</igx-date-picker>
html
사용자 정의 작업 버튼
선택기의 작업 버튼은 두 가지 방법으로 수정할 수 있습니다.
- 버튼의 텍스트는 및
cancelButtonLabel
입력 속성을 사용하여todayButtonLabel
변경할 수 있습니다.
<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>
html
- 전체 버튼은
igxPickerActions
지시문을 사용하여 템플릿화할 수 있습니다. 이 지시문을 사용하면 날짜 선택기의calendar
과 모든 해당 멤버에 액세스할 수 있습니다.
<igx-date-picker>
<ng-template igxPickerActions let-calendar>
<button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
</ng-template>
</igx-date-picker>
html
키보드 탐색
키보드를 사용하여 IgxDatePickerComponent
의 캘린더 UI를 열고 닫는 것은 dropdown
모드에서만 사용할 수 있으며 아래 키 조합을 통해 트리거될 수 있습니다.
열쇠 | 설명 |
---|---|
공간 | 달력 팝업을 표시하고 초점을 맞춥니다. |
Alt + ↓ | 달력 팝업을 표시하고 초점을 맞춥니다. |
Esc | 달력 팝업을 닫고 입력 필드에 초점을 맞춥니다. |
입력하다 | 달력 팝업을 닫고, 포커스된 날짜를 선택하고 입력창으로 포커스를 이동합니다. |
Alt + ↑ | 달력 팝업을 닫고 입력 필드에 초점을 맞춥니다. |
IgxDatePickerComponent
는 IgxDateTimeEditorDirective
사용하므로 키보드 탐색을 상속합니다.
예
대화 모드
IgxDatePickerComponent
는 dialog
모드도 지원합니다.
<igx-date-picker [mode]="'dialog'"></igx-date-picker>
html
표시 및 입력 형식
inputFormat
및 displayFormat
은 선택기의 편집기가 지정된 형식을 따르도록 설정할 수 있는 속성입니다. inputFormat
속성은 선택기가 dropdown
모드에 있을 때 사용되며 입력의 편집 가능한 마스크와 해당 자리 표시자(아무 것도 설정되지 않은 경우)를 제어합니다. 또한 inputFormat
은 로케일 기반이므로 아무것도 제공되지 않으면 선택기는 기본적으로 브라우저에서 사용되는 형식을 사용합니다.
주목해야 할 좋은 점은 Ignite UI의 Angular Date Picker Component 는 및 부분이 없는 형식으로 제공된 경우 항상 and month
부분에 선행 0 date
을 추가한다는 것입니다(예: d/M/yy
becomes dd/MM/yy
). 이는 편집 중에만 적용됩니다.
displayFormat
반면에 Angular DatePipe
를 사용하며 초점이 맞지 않을 때 선택기의 입력을 형식화하는 데 사용됩니다. 제공되지 않으면 displayFormat
선택기는 를 inputFormat
그대로 displayFormat
사용합니다. 또는 속성이 설정되지 않은 경우 inputFormat
숫자 날짜-시간 부분만 포함하는 것으로 구문 분석될 수 있는 경우 입력 형식이 유추 displayFormat
됩니다.
이에 대한 자세한 내용은 IgxDateTimeEditor
예제 섹션에서 확인할 수 있습니다.
IgxDatePicker
는 이제 IME 입력을 지원합니다. 작성이 끝나면 컨트롤은 와이드 문자 숫자를 ASCII 문자로 변환합니다.
증가 및 감소
IgxDatePickerComponent
는 increment
및 decrement
메소드를 노출합니다. 둘 다 IgxDateTimeEditorDirective
에서 나오며 현재 설정된 날짜의 특정 DatePart
늘리거나 줄이는 데 사용할 수 있습니다.
<igx-date-picker #datePicker>
<igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon>
<igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon>
</igx-date-picker>
html
또한 현재 설정된 날짜의 특정 날짜 부분을 늘리거나 줄이는 데 사용할 수 있는 spinDelta
입력 속성도 있습니다.
<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>
html
Angular 형태에서
IgxDatePickerComponent
는 핵심 FormsModule, NgModel 및 ReactiveFormsModule (FormControl
, FormGroup
등)의 모든 지시어를 지원합니다. 여기에는 양식 유효성 검사기 기능도 포함됩니다. 또한 구성 요소의 minValue
및 maxValue
속성은 양식 유효성 검사기 역할을 합니다.
당신은 볼 수 있습니다 IgxDatePickerComponent
우리를 방문하여 반응적인 형태로 반응형 양식 통합 주제.
날짜 및 시간 선택기를 함께 사용
IgxDatePicker와 IgxTimePicker
함께 사용되는 경우에 따라 하나의 동일한 Date 개체 값에 바인딩해야 할 수도 있습니다.
템플릿 기반 양식에서 이를 달성하려면 ngModel
사용하여 두 구성 요소를 동일한 Date 개체에 바인딩합니다.
반응형 양식에서는 각 구성 요소의 valueChange
이벤트를 처리하고 다른 구성 요소의 값을 업데이트할 수 있습니다.
캘린더별 설정
IgxDatePickerComponent
는 IgxCalendarComponent
사용하며 날짜 선택기가 표시하는 속성을 통해 일부 설정을 수정할 수 있습니다. 이들 중 일부에는 선택기가 확장될 때 둘 이상의 달력이 표시되도록 허용하는 displayMonthsCount
, 주의 시작일을 결정하는 weekStart
, 해당 연도의 각 주에 대한 숫자를 표시하는 showWeekNumbers
등이 포함됩니다.
국제화
현지화 IgxDatePickerComponent
그것을 통해 통제될 수 있다 locale
입력. 추가적으로, igxCalendarHeader
그리고 igxCalendarSubheader
에서 제공하는 템플릿 IgxCalendarComponent
를 사용하면 헤더와 하위 헤더의 모양을 지정할 수 있습니다. 이러한 템플릿을 사용하는 방법에 대한 자세한 내용은 IgxCalendar구성 요소 주제.
일본어 로캘 정의가 있는 Angular 날짜 선택기는 다음과 같습니다.
<igx-date-picker locale="ja-JP" [value]="date">
<ng-template igxCalendarHeader let-format>
{{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
</ng-template>
<ng-template igxCalendarSubheader let-format>
<span (click)="format.yearView()">{{ format.year.combined }}</span>
<span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
</ng-template>
</igx-date-picker>
html
스타일링
날짜 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Angular Date Picker는 달력의 테마를 사용하므로 를 확장 calendar-theme
하는 새 테마를 만들고 일부 매개 변수를 사용하여 날짜 선택기의 항목에 스타일을 지정해야 합니다.
$custom-datepicker-theme: calendar-theme(
$header-background: #345779,
$content-background: #fdfdfd,
$header-foreground: #ffffff,
$date-current-foreground: #2dabe8,
$navigation-color: #2dabe8,
$date-selected-foreground: #fdfdfd,
$date-current-background: #fdfdfd,
$navigation-hover-color: #345779,
$ym-current-foreground: #2dabe8,
$ym-hover-foreground: #2dabe8,
$picker-foreground: #2dabe8,
$picker-hover-foreground: #345779,
);
scss
마지막 단계는 사용자 지정 날짜 선택기 테마를 전달하는 것입니다.
@include css-vars($custom-datepicker-theme);
scss
구성 요소가 Emulated
ViewEncapsulation을 사용하는 경우::ng-deep
사용하여 이 캡슐화를 penetrate
해야 합니다.
:host {
::ng-deep {
@include css-vars($custom-datepicker-theme);
}
}
scss
API 참조
- IgxDatePicker구성 요소
- IgxDateTimeEditor 지시어
- IgxCalendar구성 요소
- IgxCalendarComponent 스타일
- Igx오버레이 스타일
- IgxInputGroupComponent
테마 종속성
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.