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

Angular Date Range Picker는 사용자가 시작 및 종료 날짜 값을 쉽게 선택할 수 있도록 텍스트 입력과 달력 팝업을 포함하는 경량 구성 요소입니다. 범위 제한, 형식, 데이터 범위 선택, 시작 및 끝 값 그룹화 등과 같은 기능을 사용하여 앱 요구 사항에 맞게 사용자 정의할 수 있습니다. Angular의 날짜 범위 선택기를 사용하면 개발자가 기본 보기 속성을 변경하고 월, 연도 또는 다년으로 설정할 수도 있습니다.

Angular Date Range Picker Example

우리는 작동 중인 구성요소를 보여주기 위해 이 기본 Angular Date Range Picker 예제를 만들었습니다. 이 경우 사용자가 시작 및 종료 날짜 값을 선택할 수 있는 달력 팝업이 표시됩니다.

Getting Started with Ignite UI for Angular Date Range Picker

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

ng add igniteui-angular

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

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

​IgxDateRangePicker​ ​IgxCalendarComponent를 사용하므로 터치 상호 작용을 위해 BrowserAnimationsModule 및 HammerModule에 대한 종속성도 있으므로 AppModule 에도 추가해야 합니다.

// app.module.ts

import { IgxDateRangePickerModule } from 'igniteui-angular';
// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    ...
    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule],
    ...
})
export class AppModule {}

또는 16.0.0부터 IgxDateRangePickerComponent를 독립 실행형 종속성으로 가져오거나 IGX_DATE_RANGE_PICKER_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */
})
export class HomeComponent {}

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

Using the Angular Date Range Picker Component

Display Date Range Picker

기본 모드에서 날짜 범위 선택기를 인스턴스화하려면 다음 코드를 사용하세요.

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

public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) };

Note

날짜 범위 선택기 값은 시작 날짜와 종료 날짜를 포함하는 DateRange 유형입니다.

양방향 데이터 바인딩을 만들려면 ngModel 사용하세요.

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

Projecting components

기본 날짜 범위 선택기 UX를 강화하기 위해 구성 요소는 IgxInputGroupComponent 에서와 동일한 하위 구성 요소 투영을 허용합니다: igxLabel, igx-hint / igxHint, igx-prefix / igxPrefix, igx-suffix / igxSuffix (IgxInput 제외). 이에 대한 자세한 내용은 레이블 및 입력 항목에서 확인할 수 있습니다.

또한 Ignite UI for Angular 다음을 프로젝트하도록 구성할 수 있습니다. IgxPickerToggleComponent- 달력 토글을 제어하고 다음과 같이 수정될 수 있는 구성 요소입니다. 캘린더 토글 부분.

<igx-date-range-picker #dateRangePicker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
    <igx-hint *ngIf="dateRangePicker.invalid">
        Please choose start and end date!
    </igx-hint>
</igx-date-range-picker>

Display Separate Editable Inputs

Angular Date Range Picker 구성 요소를 사용하면 시작 날짜와 종료 날짜에 대해 두 개의 별도 입력을 구성할 수도 있습니다. 이는 아래 데모에 표시된 대로 IgxDateRangeStartComponent 및 IgxDateRangeEndComponent 날짜 범위 선택기의 하위 요소로 사용하여 달성할 수 있습니다.

<igx-date-range-picker [(ngModel)]="range">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

• ​IgxDateRangeStartComponent 및 IgxDateRangeEndComponent 모두 기존 IgxInputGroupComponent 확장합니다. 이러한 구성이 작동하려면 IgxInput을 정의해야 합니다. 또한 IgxInputGroupComponent에 사용 가능한 다른 모든 구성 요소와 지시문도 사용할 수 있습니다.
• 두 입력 모두에 대해 날짜 편집을 활성화하려면 igxDateTimeEditor 지시어로 장식해야 합니다.

User Experience

단일 읽기 전용 입력이 있는 기본 구성에서는 달력 아이콘을 포함하여 입력의 아무 곳이나 클릭하여 달력을 열 수 있습니다. 시작 날짜와 종료 날짜에 대해 두 개의 별도 입력이 있는 경우 두 입력 모두 기본적으로 편집 가능하므로 달력은 달력 아이콘에서만 열 수 있습니다.

달력이 표시되면 시작 날짜와 종료 날짜를 선택하여 범위를 선택할 수 있습니다. 날짜를 선택하면 두 번째 날짜를 선택할 때까지 시작 날짜와 종료 날짜가 설정됩니다. 선택한 범위가 있는 경우 달력에서 다른 날짜를 클릭하면 새 범위 선택이 시작됩니다.

시작 날짜와 종료 날짜는 구성 요소의 읽기 전용 입력에 표시될 때 하이픈으로 구분됩니다. 시작과 끝에 대해 서로 다른 입력을 정의할 때 해당 입력은 to 전치사로 구분됩니다. 후자는 템플릿을 통해 지역화하거나 덮어쓸 수 있습니다. 자세한 내용은 아래 템플릿 예시를 참조하세요.

Examples

Label

날짜 범위 선택기의 라벨을 정의하려면 아래 스니펫에 표시된 대로 igxLabel 지시문을 사용해야 합니다.

<igx-date-range-picker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
</igx-date-range-picker>

Calendar toggle

단일 읽기 전용 입력이 있는 기본 구성에서는 기본 달력 아이콘이 접두어로 표시됩니다. 달력 아이콘은 IgxPickerToggleComponent 구성 요소를 사용하여 변경하거나 재정의할 수 있습니다. igxPrefix 또는 igxSuffix로 장식할 수 있으며 각각 입력 시작 또는 끝 위치를 정의합니다. 기본 위치를 변경하고 아이콘을 접미어로 표시하려면 다음을 수행해야 합니다.

<igx-date-range-picker>
    <igx-picker-toggle igxSuffix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
</igx-date-range-picker>

날짜 범위 선택기에 시작 날짜와 종료 날짜에 대한 두 개의 별도 입력이 있는 경우 기본적으로 달력 아이콘이 표시되지 않습니다. IgxPickerToggleComponent는 다음과 같이 IgxDateRangeStartComponent 또는 IgxDateRangeEndComponent의 하위 항목으로 수동으로 추가해야 합니다.

<igx-date-range-picker>
    <igx-date-range-start>
        ...
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>

Dialog mode

​IgxDateRangePickerComponent 구성 요소에는 드롭다운(기본값)과 대화 상자의 두 가지 모드가 있습니다. dialog 모드로 전환하려면 다음을 수행하십시오.

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

범위 값은 달력에서 날짜를 선택할 때 설정됩니다. 드롭다운 모드에서는 Done 버튼을 사용할 수 없습니다.

Custom Action Buttons

날짜 범위 선택기의 작업 버튼은 igxPickerActions 지시문을 사용하여 템플릿화할 수 있습니다. 일반적인 시나리오는 다음 데모와 같이 사용자가 미리 정의된 범위에서 선택할 수 있도록 허용하는 것입니다.

Keyboard Navigation

Note

​대화 모드 및 별도의 편집 가능한 입력 표시에 대한 데모를 사용하여 아래에 정의된 키보드 조합을 사용해 보세요.

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

• Alt + 아래쪽 화살표- 달력 UI가 포함된 드롭다운을 열고 초점을 맞춥니다.
• Alt + 위쪽 화살표- 드롭다운을 닫고 입력 필드에 초점을 맞춥니다(두 개의 개별 입력이 사용되는 경우 범위 시작 입력 필드).
• Esc- 드롭다운을 닫고 입력 필드에 초점을 맞춥니다(두 개의 별도 입력이 사용되는 경우 범위 시작 입력 필드).

날짜 범위 선택기의 달력 UI 내 키보드 탐색은 모든 모드 및 구성에서 사용할 수 있습니다. 달력이 열리면 초점이 맞춰지며 다음 키보드 조합을 사용할 수 있습니다.

• Enter는 시작일과 종료일을 선택합니다.
• PageUp, PageDown, Shift + PageUp, Shift + PageDown, Home, End, Tab- 달력 탐색

​달력 키보드 탐색 섹션에는 달력에서 사용할 수 있는 모든 키보드 조합이 포함되어 있습니다.

두 개의 개별 입력을 사용하는 경우, 키보드 탐색에 대한 igxDateTimeEditor 지침은 날짜 범위 선택기 구성요소에도 적용됩니다.

• Ctrl / Cmd + 화살표 왼쪽 / 오른쪽- 날짜 섹션 사이를 이동합니다. Ctrl / Cmd + Right를 누르면 섹션의 끝으로 이동합니다. 이미 거기에 있으면 다음 섹션의 끝으로 이동합니다. 반대 방향에서도 같은 방식으로 작동합니다.
• 위쪽 / 아래쪽 화살표 - 날짜 부분을 늘리거나 줄입니다.
• Ctrl / 명령 +;- 편집기에서 현재 날짜와 시간을 설정합니다.

Formatting

날짜 범위 선택기 구성요소는 다양한 표시 및 입력 형식을 지원합니다.

값의 표시 형식은 나열된 Angular DatePipe 형식 중 하나일 수 있습니다. 이를 통해 shortDate 및 longDate와 같은 사전 정의된 형식 옵션을 지원할 수 있습니다.

​inputFormat 속성은 DatePipe에서 지원하는 문자(예 MM/dd/yyyy를 사용하여 구성된 형식 문자열을 허용하지만 shortDate 및 longDate와 같은 미리 정의된 형식 옵션은 지원하지 않습니다. inputFormat 속성이 정의되지 않은 경우 이를 빌드할 때 Angular 로케일 ID 토큰이 사용됩니다.

<igx-date-range-picker [(ngModel)]="range" required
    inputFormat="dd/MM/yyyy" displayFormat="shortDate">
</igx-date-range-picker>

Note

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

Forms and Validation

날짜 범위 선택기 구성 요소는 핵심 FormsModule, NgModel 및 ReactiveFormsModule (FormControl, FormGroup 등)의 모든 지시문을 지원합니다. 여기에는 양식 유효성 검사기 기능도 포함됩니다. 또한 구성 요소의 최소 및 최대 값은 양식 유효성 검사기 역할도 합니다.

​NgModel 및 유효성 검사기는 IgxDateRangePickerComponent 또는 개별 시작 및 종료 날짜 입력에 설정할 수 있습니다.

다음 조각과 예제에서는 템플릿 기반 양식에서 required 유효성 검사기를 사용하는 방법을 보여줍니다.

먼저 단일 읽기 전용 범위 구성 요소에 대한 모델을 설정해야 하며 이는 구성 요소 수준에서 수행됩니다.

<igx-date-range-picker [(ngModel)]="range" required>
    <label igxLabel>Period</label>
</igx-date-range-picker>

두 개의 개별 입력을 설정할 때 동일한 구성을 사용할 수 있습니다. 이 경우 유효성 검사는 두 입력 모두에도 적용됩니다.

<igx-date-range-picker [(ngModel)]="range" required>
    <igx-date-range-start>
        <label igxLabel>Start Date</label>
        <input igxInput igxDateTimeEditor type="text">
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_today</igx-icon>
        </igx-picker-toggle>
    </igx-date-range-start>
    <igx-date-range-end>
        <label igxLabel>End Date</label>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

두 개의 별도 입력을 사용하는 경우 각 입력에 모델 및 필수 속성을 설정할 수 있습니다. 유효성 검사는 각 개별 입력에 따라 다릅니다.

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

Min and max values

​minValue 및 maxValue 속성을 지정하면 해당 값으로 정의된 범위를 벗어나는 달력 날짜를 비활성화하여 사용자 입력을 제한할 수 있습니다.

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-date-range-picker [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
</igx-date-range-picker>

<igx-date-range-picker [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

​IgxDateRangePickerComponent는 minValue 및 maxValue 사용하여 내부적으로 유효성을 제어하는 유효성 검사기이기도 합니다. ngModel 통해 두 가지 모두에 액세스할 수도 있습니다.

<igx-date-range-picker #dateRangePicker="ngModel" [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

<!-- minValue & maxValue will be true if the current range does not satisfy them -->
<div *ngIf="dateRangePicker.minValue || dateRangePicker.maxValue">
    <p>Value not in range.</p>
</div>

Templating

두 개의 편집기를 사용하는 경우 igxDateRangeSeparator 지시어를 사용하여 기본 구분 기호를 바꿀 수 있습니다. 날짜 구분 기호를-으로 변경하는 방법은 다음과 같습니다.

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <ng-template igxDateRangeSeparator>-</ng-template>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

스타일링

​igxDateRangePicker 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

날짜 범위 선택기 구성요소는 date-range-picker-theme 노출하고 igxInputGroupComponent, igxCalendar 및 igxOverlay를 포함한 여러 구성요소 및 지시어를 활용합니다. 앞서 언급한 구성 요소 및 지시문에 대한 전역 스타일은 igxDateRangeComponent에 영향을 미칩니다. 날짜 범위 선택기 구성 요소는 입력 그룹 및 달력 테마를 사용하므로 calendar-theme 및 input-group-theme 확장하고 해당 매개 변수 중 일부를 사용하여 날짜 범위와 함께 날짜 범위 선택기의 스타일을 지정하는 새 테마를 만들어야 합니다. 선택기 테마. 단일 사용자 정의 색상 팔레트를 사용하여 모든 테마에 사용할 색상을 정의합니다.

// COMMON
$purple: #9E379F;
$blue: #61AEDB;

$custom-palette: palette($primary: $blue, $secondary: $purple);

$today-text: color($custom-palette, "primary", 500);
$text-color: color($custom-palette, "secondary", 200);
$color-focused: color($custom-palette, "secondary", 500);

// DATE-RANGE
$custom-date-range-theme:date-range-picker-theme(
    $label-color: $color-focused
);

// INPUT GROUP
$custom-input-group-theme: input-group-theme(
  $palette: $custom-palette,
  $filled-text-color: $text-color,
  $idle-text-color: $text-color,
  $focused-text-color: $color-focused,
  $hover-bottom-line-color: $color-focused,
  $idle-bottom-line-color: $purple
);

// CALENDAR
$custom-calendar-theme: calendar-theme(
    $palette: $custom-palette,
    $date-current-text-color: $today-text,
    $border-radius: 0.5,
    $date-border-radius: 0.5
);

Using CSS variables

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

@include css-vars($custom-date-range-theme);
@include css-vars($custom-input-group-theme);
@include css-vars($custom-calendar-theme);

Using Theme Overrides

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

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

:host {
   ::ng-deep {
       @include date-range-picker($custom-date-range-theme);
       @include input-group($custom-input-group-theme);
       @include calendar($custom-calendar-theme);
   }
}

Scoping Styles

스타일 범위 지정과 관련하여 자세한 정보를 제공하는 스타일 섹션 [오버레이 범위 지정 구성요소 스타일](overlay-styling.md#Scoped 오버레이 스타일) 및 입력 그룹 범위 지정 스타일을 모두 참조해야 합니다.

Application Demo

아래 데모에서는 IgxDateRangePickerComponent를 사용하는 항공권 양식을 정의합니다. 날짜를 선택하지 않으면 IgxHint 사용하여 유효성 검사 오류를 표시합니다. 날짜 선택은 IgxDateRangePickerComponent의 minValue 및 maxValue 속성에 의해 제한됩니다.

API References

• IgxDateRangePickerComponent
• IgxCalendar구성 요소
• IgxCalendarComponent 스타일
• Igx오버레이 스타일
• IgxInputGroupComponent

Theming Dependencies

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

Additional Resources

관련 주제:

• 날짜 시간 편집기
• 라벨 및 입력
• 반응형 양식 통합
• 날짜 선택기

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

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