Angular Datepicker 구성요소 개요

Angular DatePicker는 수동 텍스트 입력을 통해 날짜를 입력하거나 팝업되는 달력 대화 상자에서 날짜 값을 선택하는 데 사용되는 기능이 풍부한 구성 요소입니다. 가볍고 사용하기 쉬운 Angular의 DatePicker를 사용하면 사용자는 월, 연도, 10년 등 여러 보기 옵션을 사용하여 원하는 날짜를 탐색할 수 있습니다. 유효성 검사를 추가하는 데 필요한 일반적인 최소, 최대 및 필수 속성이 있습니다.

Ignite UI for Angular 하면 사용자가 월 보기 달력 드롭다운 또는 편집 가능한 입력 필드를 통해 단일 날짜를 선택할 수 있습니다. Angular DatePicker는 달력에서만 선택할 수 있는 대화 상자 모드, 로케일 인식, 사용자 정의 가능한 날짜 형식 지정 및 유효성 검사 통합도 지원합니다.

Angular Datepicker Example

아래에서는 사용자가 수동 텍스트 입력을 통해 날짜를 선택하고 왼쪽의 달력 아이콘을 클릭하여 해당 날짜로 이동할 수 있는 경우 Angular DatePicker가 작동하는 방식을 보여 주는 샘플을 볼 수 있습니다. 렌더링 방법을 참조하십시오.

Getting Started with Ignite UI for Angular Datepicker

Ignite UI for Angular 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxDatePickerModule 당신의 app.module.ts 파일.

Note

선택기는 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 {}

또는 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 {}

이제 Ignite UI for Angular 가져왔으므로 igx-date-picker 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Datepicker Component

Display Datepicker

기본 dropdown 상태에서 Datepicker를 인스턴스화하려면 다음 코드를 사용하세요.

<igx-date-picker>
    <label igxLabel>Date</label>
</igx-date-picker>

Options

​IgxDatePickerComponent는 date 또는 string에 바인딩될 수 있습니다.

<igx-date-picker [value]="date"></igx-date-picker>

public date = new Date(2000, 0, 1);

문자열이 선택기에 바인딩된 경우 ISO 8601 형식의 날짜 전용 문자열이어야 합니다.

<igx-date-picker [value]="'2000-01-01'"></igx-date-picker>

이에 대한 자세한 내용은 DateTime Editor의 ISO 섹션에서 확인할 수 있습니다.

​ngModel 통해 양방향 바인딩이 가능합니다.

<igx-date-picker [(ngModel)]="date"></igx-date-picker>

뿐만 아니라 value 입력을 통해서도 다음과 같습니다.

<igx-date-picker [(value)]="date"></igx-date-picker>

또한 formControlName 선택기에 설정하여 반응형 형식으로 사용할 수 있습니다.

<form [formGroup]="form">
    <igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>

export class SampleFormComponent {
    // ...
    public form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            datePicker: ['', Validators.required]
        });
    }
}

Note

선택기는 항상 Date 값을 반환합니다. 즉, 모델 바인딩되거나 문자열 변수에 양방향 바인딩된 경우 새 날짜를 선택한 후 Date 유형이 됩니다.

Projecting components

​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>

위의 스니펫은 입력 끝의 기본 지우기 아이콘 바로 뒤에 추가 토글 아이콘을 추가합니다. 이렇게 하면 기본 토글 아이콘이 제거되지 않지만 접두사와 접미사를 차례로 쌓을 수 있습니다.

토글 및 지우기 아이콘 사용자 정의

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>

사용자 정의 작업 버튼

선택기의 작업 버튼은 두 가지 방법으로 수정할 수 있습니다.

• 버튼의 텍스트는 및 cancelButtonLabel 입력 속성을 사용하여 todayButtonLabel 변경할 수 있습니다.

<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>

• 전체 버튼은 igxPickerActions 지시문을 사용하여 템플릿화할 수 있습니다. 이 지시문을 사용하면 날짜 선택기의 calendar과 모든 해당 멤버에 액세스할 수 있습니다.

<igx-date-picker>
    <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
    </ng-template>
</igx-date-picker>

Keyboard Navigation

키보드를 사용하여 IgxDatePickerComponent의 캘린더 UI를 열고 닫는 것은 dropdown 모드에서만 사용할 수 있으며 아래 키 조합을 통해 트리거될 수 있습니다.

열쇠	설명
공간	달력 팝업을 표시하고 초점을 맞춥니다.
Alt + ↓	달력 팝업을 표시하고 초점을 맞춥니다.
Esc	달력 팝업을 닫고 입력 필드에 초점을 맞춥니다.
입력하다	달력 팝업을 닫고, 포커스된 날짜를 선택하고 입력창으로 포커스를 이동합니다.
Alt + ↑	달력 팝업을 닫고 입력 필드에 초점을 맞춥니다.

​IgxDatePickerComponent는 IgxDateTimeEditorDirective 사용하므로 키보드 탐색을 상속합니다.

Examples

Dialog Mode

​IgxDatePickerComponent는 dialog 모드도 지원합니다.

<igx-date-picker [mode]="'dialog'"></igx-date-picker>

Display and input format

inputFormat 및 displayFormat은 선택기의 편집기가 지정된 형식을 따르도록 설정할 수 있는 속성입니다. inputFormat 속성은 선택기가 dropdown 모드에 있을 때 사용되며 입력의 편집 가능한 마스크와 해당 자리 표시자(아무 것도 설정되지 않은 경우)를 제어합니다. 또한 inputFormat은 로케일 기반이므로 아무것도 제공되지 않으면 선택기는 기본적으로 브라우저에서 사용되는 형식을 사용합니다.

주목해야 할 좋은 점은 Ignite UI의 Angular DatePicker 구성 요소가 항상 앞에 0을 추가한다는 것입니다. date 그리고 month 해당 부분이 없는 형식으로 제공된 경우(예: d/M/yy 된다 dd/MM/yy. 이는 편집 중에만 적용됩니다.

반면에 displayFormat Angular의 DatePipe 사용하며 포커스가 없을 때 선택기의 입력 형식을 지정하는 데 사용됩니다. displayFormat 제공되지 않으면 선택기는 inputFormat 해당 displayFormat으로 사용합니다.

이에 대한 자세한 내용은 IgxDateTimeEditor 예제 섹션에서 확인할 수 있습니다.

Note

​IgxDatePicker는 이제 IME 입력을 지원합니다. 작성이 끝나면 컨트롤은 와이드 문자 숫자를 ASCII 문자로 변환합니다.

Increment and decrement

​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>

또한 현재 설정된 날짜의 특정 날짜 부분을 늘리거나 줄이는 데 사용할 수 있는 spinDelta 입력 속성도 있습니다.

<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>

In Angular Forms

​IgxDatePickerComponent는 핵심 FormsModule, NgModel 및 ReactiveFormsModule (FormControl, FormGroup 등)의 모든 지시어를 지원합니다. 여기에는 양식 유효성 검사기 기능도 포함됩니다. 또한 구성 요소의 minValue 및 maxValue 속성은 양식 유효성 검사기 역할을 합니다.

당신은 볼 수 있습니다 IgxDatePickerComponent 우리를 방문하여 반응적인 형태로 반응형 양식 통합 주제.

날짜 및 시간 선택기를 함께 사용

IgxDatePicker와 IgxTimePicker 함께 사용되는 경우에 따라 하나의 동일한 Date 개체 값에 바인딩해야 할 수도 있습니다.

템플릿 기반 양식에서 이를 달성하려면 ngModel 사용하여 두 구성 요소를 동일한 Date 개체에 바인딩합니다.

반응형 양식에서는 각 구성 요소의 valueChange 이벤트를 처리하고 다른 구성 요소의 값을 업데이트할 수 있습니다.

Calendar Specific settings

​IgxDatePickerComponent는 IgxCalendarComponent 사용하며 날짜 선택기가 표시하는 속성을 통해 일부 설정을 수정할 수 있습니다. 이들 중 일부에는 선택기가 확장될 때 둘 이상의 달력이 표시되도록 허용하는 displayMonthsCount, 주의 시작일을 결정하는 weekStart, 해당 연도의 각 주에 대한 숫자를 표시하는 showWeekNumbers 등이 포함됩니다.

Internationalization

현지화 IgxDatePickerComponent 그것을 통해 통제될 수 있다 locale 입력. 추가적으로, igxCalendarHeader 그리고 igxCalendarSubheader에서 제공하는 템플릿 IgxCalendarComponent를 사용하면 헤더와 하위 헤더의 모양을 지정할 수 있습니다. 이러한 템플릿을 사용하는 방법에 대한 자세한 내용은 IgxCalendar구성 요소 주제.

일본어 로케일 정의가 포함된 Angular DatePicker는 다음과 같습니다.

<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>

스타일링

날짜 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Angular DatePicker는 달력 테마를 사용하므로 calendar-theme 확장하는 새 테마를 만들고 해당 매개변수 중 일부를 사용하여 날짜 선택기 항목의 스타일을 지정해야 합니다.

$custom-datepicker-theme: calendar-theme(
    $header-background: #345779,
    $content-background: #fdfdfd,
    $header-text-color: #ffffff,
    $date-current-text-color: #2dabe8,
    $picker-arrow-color: #2dabe8,
    $date-selected-text-color: #fdfdfd,
    $date-current-bg-color: #fdfdfd,
    $picker-arrow-hover-color: #345779,
    $year-current-text-color: #2dabe8,
    $year-hover-text-color: #2dabe8,
    $month-current-text-color: #2dabe8,
    $month-hover-text-color: #2dabe8,
    $picker-text-color: #2dabe8,
    $picker-text-hover-color: #345779,
);

Using CSS variables

마지막 단계는 사용자 정의 Angular DatePicker 테마를 전달하는 것입니다.

@include css-vars($custom-datepicker-theme);

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
   ::ng-deep {
       @include calendar($custom-datepicker-theme);
   }
}

API References

• IgxDatePicker구성 요소
• IgxDateTimeEditor 지시어
• IgxCalendar구성 요소
• IgxCalendarComponent 스타일
• Igx오버레이 스타일
• IgxInputGroupComponent

Theming Dependencies

• IgxCalendar 테마
• Igx오버레이 테마
• IgxIcon 테마
• IgxButton 테마
• IgxInputGroup 테마
• IgxDropDown 테마

Additional Resources

• 시간 선택기
• 날짜 시간 편집기
• 날짜 범위 선택기
• 반응형 양식 통합

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub