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

Angular 날짜 범위 선택기는 텍스트 입력과 달력 팝업을 포함하는 경량 구성 요소로, 사용자가 시작 날짜와 종료 날짜를 쉽게 선택할 수 있습니다. 다양한 애플리케이션 요구 사항에 맞게 사용자 정의가 가능하며 날짜 범위 제한, 구성 가능한 날짜 형식 등과 같은 기능을 제공합니다.

Angular Date Range Picker Example

아래는 사용자가 시작일과 종료일을 선택할 수 있도록 캘린더 팝업을 통해 구성 요소를 시연IgxDateRangePickerComponent 한 샘플입니다.

Getting Started with Ignite UI for Angular Date Range Picker

Ignite UI for AngularIgxDateRangePickerComponent 컴포넌트를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령어를 입력하세요:

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxDateRangePickerModule 당신의 app.module.ts 파일.

​IgxDateRangePickerComponent다음과 같은 IgxCalendarComponent, 또한 다음 브라우저 애니메이션 모듈 그리고 필요 그 해머모듈 터치 상호작용을 위해 이 부분들을 추가해야 합니다AppModule 또한:

// app.module.ts

import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker';
// 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/date-picker';
// 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 Date Range Picker 모듈이나 지시를 가져왔으니, 컴포넌트igx-date-range-picker 사용을 시작할 수 있습니다.

Using the Angular Date Range Picker Component

Display and Value

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

<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

Date Range Picker 값은 시작일과 종료일을 포함하는 타입DateRange 입니다.

선택기는 날짜 값을 표시하기 위한 두 가지 모드(단일 입력 및 두 입력)를 제공합니다. 단일 입력 모드에서는 필드를 편집할 수 없으며 입력하여 날짜 범위를 편집할 수 없습니다. 그러나 두 가지 입력 모드에서는 사용자가 별도의 입력 필드에 입력하여 시작 날짜와 종료 날짜를 편집할 수 있습니다.

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

양방향 데이터 바인딩을 생성하려면 다음을 사용하세요ngModel:

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

Display Separate Editable Inputs

Angular 날짜 범위 선택기 구성 요소는 시작일과 종료일에 대해 두 개의 별도 입력을 설정할 수 있게 해줍니다. 이는 아래 데모에서 보듯이 날짜 범위 선택기의 자식을 사용하여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 장식해야 합니다.

Popup modes

기본적으로 클릭하면IgxDateRangePickerComponent 달력 팝업이 모드로dropdown 열립니다. 또는 속성을 로dialog 설정Mode 하여 달력을 모드에서dialog 열 수도 있습니다.

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

기본 설정에서 단일 읽기 전용 입력이 있을 때, 달력 아이콘 등 입력 내 어디든 클릭하여 달력을 열 수 있습니다. 시작일과 종료일에 대한 두 개의 별도 입력이 있고 드롭다운 모드일 때, 달력은 기본적으로 두 입력 모두 편집 가능하므로 달력 아이콘에서만 열 수 있습니다. 모드에서dialog 두 입력을 할 때는 입력 어디든 클릭하면 달력이 열립니다

범위 값은 달력에서 날짜를 선택할 때 설정됩니다. 드롭다운 모드Done 에서는 해당 버튼이 사용 불가능한 것을 알 수 있습니다. 대화 모드에서는 닫을 때 선택 항목을 되돌릴 수 있는 버튼이Cancel 있습니다.

Keyboard Navigation

​IgxDateRangePickerComponent직관적인 키보드 내비게이션 기능을 제공하여, 사용자가 마우스 없이도 다양한 구성 요소 사이를 쉽게 늘리거나 감소하거나 점프할 수 있습니다.

사용 가능한 키보드 탐색 옵션은 구성 요소가 단일 입력 모드인지 두 입력 모드인지에 따라 달라집니다.

두 개의 입력 모드:

열쇠	설명
←	캐럿을 왼쪽으로 한 문자 이동합니다.
→	캐럿을 오른쪽으로 한 문자 이동합니다.
Ctrl + ArrowLeft	캐럿을 현재 입력 마스크 섹션의 시작 부분으로 이동하거나 이미 시작 부분에 있는 경우 이전 섹션의 시작 부분으로 이동합니다
Ctrl + ArrowRight	캐럿을 현재 입력 마스크 섹션의 끝으로 이동하거나 이미 끝에 있는 경우 다음 섹션의 끝으로 이동합니다.
ArrowUp	입력 마스크의 현재 "초점이 맞춰진" 부분을 한 단계씩 증가시킵니다
ArrowDown	입력 마스크의 현재 "초점이 맞춰진" 부분을 한 단계 감소시킵니다.
집	캐럿을 입력 마스크의 시작 부분으로 이동합니다.
끝	캐럿을 입력 마스크의 끝으로 이동합니다.
Ctrl + ;	현재 날짜를 구성 요소의 값으로 설정합니다.

단일 및 두 개의 입력 모드 모두:

열쇠	설명
Alt + ArrowDown	Opens the calendar dropdown
Alt + ArrowUp	Closes the calendar dropdown

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

Layout

Projecting components

기본 Date Range Picker UX를 풍부하게 하기 위해, 이 컴포넌트는 자식 컴포넌트를 투영할 수 있게 하는데, 이는 제외된 방식과 동일IgxInputGroupComponent​igxLabel​igx-hint / igxHint​igx-prefix / igxPrefix​igx-suffix / igxSuffix​IgxInput 합니다. 이에 대한 자세한 정보는 라벨 및 입력 주제에서 확인할 수 있습니다.

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

또는 두 개의 입력에 대해:

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

아이콘 전환 및 지우기

기본 구성에서는 단일 읽기 전용 입력으로 기본 달력 아이콘이 접두사로, 투명 아이콘이 접미사로 표시됩니다. 이 아이콘들은 andIgxPickerToggleComponent를 사용하여IgxPickerClearComponent 변경하거나 재정의할 수 있습니다. 또는 또는 두 가지 표시로 장식igxPrefix​igxSuffix 할 수 있는데, 이 경우 입력의 시작 지점이나 끝에 각각 위치가 정의됩니다:

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

Date Range Picker가 시작일과 종료일에 대해 두 개의 별도 입력을 가지고 있을 때는 기본적으로 이 아이콘들을 노출하지 않습니다. 와IgxPickerToggleComponent는IgxPickerClearComponent 다음과 같이 자식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-picker-clear igxSuffix>
            <igx-icon>clear</igx-icon>
        </igx-picker-clear>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>

Custom And Predefined Date Ranges

또한 캘린더 팝업에 맞춤형 날짜 범위 칩을 추가해 더 빠른 범위 선택customRanges을 할 수도 있습니다. 예를 들어, 다가오는 7일간의 범위를 빠르게 선택할 수 있는 맞춤형 날짜 범위 칩을 만들 수 있으며, 그 범위는 현재 날짜로 끝납니다. 또한, 속성을 설정usePredefinedRanges 하면 미리 정의된 범위 칩 세트가 커스텀 칩과 함께 표시됩니다.

public today = new Date();

public nextSeven = new Date(
    this.today.getFullYear(),
    this.today.getMonth(),
    this.today.getDate() + 7
);

public customRanges: CustomDateRange[] = [
    {
        label: 'Next 7 days',
        dateRange: {
          start: this.today,
          end: this.nextSeven
        }
      }
];

<igx-date-range-picker [usePredefinedRanges]="true" [customRanges]="customRanges"></igx-date-range-picker>

또한, 이 지시를 사용해igxPickerActions 사용자 지정 콘텐츠나 동작을 템플릿화할 수 있습니다. 다음 데모는 미리 정의된 범위와 사용자 지정 범위, 그리고 템플릿화된 동작들을 보여줍니다:

Formatting

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

값의 표시 형식은 나열된 Angular DatePipe 형식 중 하나일 수 있습니다. 이로 인해 사전 정의된 형식 옵션,shortDate 예를 들어 andlongDate와 같은 옵션이 지원됩니다.

이 속성은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>

속성이inputFormat 설정되어 있지 않으면, 입력 형식은 숫자 날짜-시간 부분만 포함할 수 있는 경우에 따라 추론displayFormat 됩니다.

Note

이제는IgxDateRangePicker IME 입력을 지원합니다. 컴포지션이 끝나면 컨트롤은 넓은 문자 숫자를 ASCII 문자로 변환합니다.

Forms and Validation

Date Range Picker 컴포넌트는 핵심 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 자(validator)로, 내부적으로 그리고 그 유효성을 제어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>

Disabled And Special dates

또한 사용자가 선택할 수 있는 날짜 범위를 좁히기 위해 달력에서 비활성화된 날짜를 설정할 수 있습니다. 비활성화 날짜를 설정하려면 해당disabledDates 속성을 사용할 수 있습니다.

export class DateRangeSampleComponent implements OnInit {
    @ViewChild('dateRange') public dateRange: IgxDateRangePicker;

    public minDate = new Date(2025, 4, 1);
    public maxDate = new Date(2025, 4, 31);

    public ngOnInit() {
        this.dateRange.disabledDates = [
        {
            type: DateRangeType.Between,
            dateRange: [minDate, maxDate]
        }
        ] as DateRangeDescriptor[];
    }
}

이 부동산이DisabledDates 제공하는 모든 가능성에 대한 자세한 정보는 여기에서 확인할 수 있습니다: 캘린더 장애인 날짜.

달력에 하나 이상의 특별한 날짜를 설정하고 싶을 때도 같은 방식으로 할 수 있습니다; 유일한 차이점은 부동산을 사용해야SpecialDates 한다는 점입니다. 특별 날짜

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>

Calendar specific settings

다양한 속성을 사용하여 팝업 달력을 추가로 사용자 지정할 수 있습니다. 이러한 기능이 달력에 미치는 영향에 대한 자세한 내용은 IgxCalendarComponent 항목에서 찾을 수 있습니다.

이름	유형	설명
orientation	'vertical' or 'horizontal'	달력을 세로로 표시할지 가로로 표시할지 여부를 설정할 수 있습니다.
displayMonthsCount	끈	한 번에 표시되는 개월 수를 1 또는 2 값으로 제어합니다.
showWeekNumbers	끈	달력에서 주 번호 열을 활성화하거나 비활성화합니다.
weekStart	끈	주의 시작 요일을 설정합니다.
hideOutsideDays	부울	현재 월 보기를 벗어나는 날짜를 숨깁니다.
hideHeader	부울	달력 헤더를 숨깁니다(대화 상자 모드에서만 적용 가능).
headerOrientation	'vertical' or 'horizontal'	Aligns the calendar header vertically or horizontally (dialog mode only).
activeDate	날짜	달력에서 처음에 강조 표시된 날짜를 설정합니다. 설정하지 않으면 현재 날짜가 활성 날짜가 됩니다.

 <igx-date-range-picker [hideHeader]="true"
                        [orientation]="'vertical'"
                        [headerOrientation]="'horizontal'"
                        [displayMonthsCount]="1">
</igx-date-range-picker>

달력 헤더의 헤더, 서브헤더, 타이틀 부분은 템플릿 지침(예: )을 활용igxCalendarHeader​igxCalendarSubheader​igxCalendarHeaderTitle 해 커스터마이징할 수 있습니다:

<igx-date-range-picker [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>
    <ng-template igxCalendarHeaderTitle let-format>
    <span>My calendar</span>
  </ng-template>
</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 미칩니다. Date Range Picker 컴포넌트가 입력 그룹과 달력 테마를 사용하기 때문에, 우리는 그리고calendar-theme 그 매개변수 중 일부를 사용하여 Date 범위 선택기 테마와 함께 스타일링하는 새로운 테마input-group-theme를 만들어야 합니다. 모든 테마에서 사용할 색상을 정의하기 위해 단일 맞춤 색상 팔레트를 사용할 것입니다:

// COMMON
$purple: #9E379F;
$blue: #61AEDB;
$light-gray: #efefef;

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

$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(
  $filled-text-color: $text-color,
  $idle-text-color: $text-color,
  $focused-text-color: $color-focused,
  $idle-bottom-line-color: $purple,
  $hover-bottom-line-color: $color-focused,
  $interim-bottom-line-color: $color-focused
);

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

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

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

Warning

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

: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 날짜가 선택되지 않으면 aIgxHint가 검증 오류를 표시하는 데 사용됩니다. 날짜 선택은 와minValue의 속성에 의해maxValue 제한됩니다.IgxDateRangePickerComponent

API References

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

Theming Dependencies

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

Additional Resources

관련 주제:

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

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

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