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

Now that you have the Ignite UI for Angular Date Picker module or directives imported, you can start using the igx-date-picker component.

Using the Angular Date Picker Component

Display Date picker

To instantiate a Date Picker in its default dropdown state, use the following code:

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

Options

The IgxDatePickerComponent can be bound to a date or a string.

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

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

If a string is bound to the picker, it needs to be a date-only string in the ISO 8601 format:

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

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

Two-way binding is possible through ngModel:

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

As well as through the value input:

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

Additionally, formControlName can be set on the picker, to use it in a reactive form:

<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

The picker always returns a Date value, this means that If it is model bound or two-way bound to a string variable, after a new date has been chosen, it will be of type Date.

Projecting components

The IgxDatePickerComponent allows the projection of child components that the IgxInputGroupComponent supports (with the exception of IgxInput) - igxLabel, igx-hint / IgxHint, igx-prefix / igxPrefix, igx-suffix / igxSuffix. More detailed information about this can be found in the Label & Input topic.

<igx-date-picker #datePicker>
    <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>

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

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

The IgxDatePickerComponent can be configured with IgxPickerToggleComponent and IgxPickerClearComponent. These can be used to change the toggle and clear icons without having to add your own click handlers.

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

사용자 정의 작업 버튼

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

• the button's text can be changed using the todayButtonLabel and the cancelButtonLabel input properties:

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

• the whole buttons can be templated using the igxPickerActions directive: With it you gain access to the date picker's calendar and all of its members:

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

Keyboard Navigation

Opening and closing the IgxDatePickerComponent's calendar UI with the keyboard is available only for dropdown mode and can be triggered via the key combinations below:

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

Since the IgxDatePickerComponent uses the IgxDateTimeEditorDirective it inherits its keyboard navigation.

Examples

Dialog Mode

The IgxDatePickerComponent also supports a dialog mode:

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

Display and input format

inputFormat and displayFormat are properties which can be set to make the picker's editor follow a specified format. The inputFormat property is used when the picker is in dropdown mode and it governs the input's editable mask, as well as its placeholder (if none is set). Additionally, the inputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the the Angular Date Picker Component in Ignite UI will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

displayFormat on the other hand uses Angular's DatePipe and is used to format the picker's input when it is not focused. If no displayFormat is provided, the picker will use the inputFormat as its displayFormat. Alternatively, if the inputFormat property is not set, the input format will be inferred from the displayFormat in case it can be parsed as containing numeric date-time parts only.

More information about these can be found in the IgxDateTimeEditor examples section.

Note

The IgxDatePicker now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters.

Increment and decrement

The IgxDatePickerComponent exposes increment and decrement methods. Both of which come from the IgxDateTimeEditorDirective and can be used for incrementing and decrementing a specific DatePart of the currently set date.

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

It also has as a spinDelta input property which can be used to increment or decrement a specific date part of the currently set date.

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

In Angular Forms

The IgxDatePickerComponent supports all directives from the core FormsModule, NgModel and ReactiveFormsModule (FormControl, FormGroup, etc.). This also includes the Forms Validators functions. In addition, the component's minValue and maxValue properties act as form validators.

You can see the IgxDatePickerComponent in a reactive form by visiting our Reactive Forms Integration topic.

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

In some cases when the IgxDatePicker and the IgxTimePicker are used together, we might need them to be bound to one and the same Date object value.

To achieve that in template driven forms, use the ngModel to bind both components to the same Date object.

In reactive forms, we can handle the valueChange event of each component and update the value of the other.

Calendar Specific settings

The IgxDatePickerComponent uses the IgxCalendarComponent and you can modify some of its settings via the properties that the date picker exposes. Some of these include displayMonthsCount which allows more than one calendar to be displayed when the picker expands, weekStart which determines the starting day of the week, showWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgxDatePickerComponent can be controlled through its locale input. Additionally, using the igxCalendarHeader and the igxCalendarSubheader templates, provided by the IgxCalendarComponent, you can specify the look of your header and subheader. More information on how to use these templates can be found in the IgxCalendarComponent topic.

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

스타일링

To get started with styling the date picker, we need to import the index file, where all the theme functions and component mixins live:

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

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

The Angular Date Picker uses the calendar's theme, so we have to create a new theme that extends the calendar-theme. By setting the $header-background, the theme automatically computes the necessary colors for the other properties to ensure a visually balanced and accessible design.

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

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

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

Warning

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

:host {
  ::ng-deep {
    @include css-vars($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 포럼
• ​GitHub Ignite UI for Angular