Angular 날짜 선택기 구성 요소 개요

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

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

Angular Date Picker Example

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

Getting Started with Ignite UI for Angular Date Picker

Ignite UI for Angular Date Picker 구성 요소를 시작하려면 먼저 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/date-picker';
// 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/date-picker';
// 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 Date Picker Component

Display Date picker

날짜 선택기를 기본dropdown 상태로 인스턴스화하려면 다음 코드를 사용하세요:

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

Options

는IgxDatePickerComponent adate 또는 astring에 결합될 수 있습니다.

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

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

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

이 카드는IgxDatePickerComponent와IgxPickerToggleComponent 함께IgxPickerClearComponent 구성할 수 있습니다. 이 버튼들은 자신만의 클릭 핸들러를 추가하지 않고도 토글 변경과 아이콘 지우기에 사용할 수 있습니다.

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

사용자 정의 작업 버튼

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

버튼의 텍스트는 와todayButtonLabel 입력 속성 를 사용하여cancelButtonLabel 변경할 수 있습니다:

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

키보드로 달력 UI를 열고 닫IgxDatePickerComponent는 기능은 모드에서만dropdown 가능하며, 아래 키 조합을 통해 트리거할 수 있습니다:

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

사용하기 때문에IgxDatePickerComponentIgxDateTimeEditorDirective 키보드 내비게이션을 계승합니다.

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 날짜 선택기 컴포넌트는 해당 포맷(예:date becomesmonth)이 없는 경우 항상 부분 앞d/M/yydd/MM/yy에 0을 추가합니다. 이 내용은 편집 중에만 적용됩니다.

displayFormat반면 Angular 를DatePipe 사용하며, 피커의 입력이 초점이 맞지 않을 때 포맷을 사용하는 데 사용됩니다. 만displayFormat 약 번호가 제공되지 않으면, 피커는 그inputFormat 번호를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 헤더와 서브 헤더의 외관을 지정할 수 있습니다. 이 템플릿들을 사용하는 방법에 대한 자세한 정보는 다음에서 확인할 수 있습니다. IgxCalendarComponent 주제.

일본어 로캘 정의가 있는 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>

스타일링

날짜 선택기 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와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 날짜 선택기는 달력의 테마를 사용하기 때문에, 확장하는calendar-theme 새로운 테마를 만들어야 합니다. 를$header-background 설정함으로써 테마는 시각적으로 균형 잡히고 접근하기 쉬운 디자인을 보장하기 위해 다른 속성에 필요한 색상을 자동으로 계산합니다.

$custom-datepicker-theme: calendar-theme(
  $header-background: #57a5cd,
);

마지막 단계는 사용자 지정 날짜 선택기 테마를 전달하는 것입니다.

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

Warning

만약 컴포넌트가 ViewEncapsulation을 사용Emulated 한다면, 이 캡슐화는penetrate 다음을 통해 필요합니다.::ng-deep

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

API References

Theming Dependencies

Additional Resources

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

Angular 날짜 선택기 구성 요소 개요

Angular Date Picker Example

Getting Started with Ignite UI for Angular Date Picker

Note

Using the Angular Date Picker Component

Display Date picker

Options

Note

Projecting components

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

사용자 정의 작업 버튼

Keyboard Navigation

Examples

Dialog Mode

Display and input format

Note

Increment and decrement

In Angular Forms

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

Calendar Specific settings

Internationalization

스타일링

Warning

API References

Theming Dependencies

Additional Resources

테마