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

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

Angular Date Range Picker Example

다음은 사용자가 시작 및 종료 날짜를 선택할 수 있는 달력 팝업을 통해 작동하는 구성 요소를 보여 주는 IgxDateRangePickerComponent 샘플입니다.

Getting Started with Ignite UI for Angular Date Range Picker

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

ng add igniteui-angular

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

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

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

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

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

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

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

<igx-date-range-picker [(ngModel)]="range"></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 지시어로 장식해야 합니다.

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

기본 날짜 범위 선택기 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>

아이콘 전환 및 지우기

단일 읽기 전용 입력을 사용하는 기본 구성에서 기본 달력 아이콘은 접두사로 표시되고 명확한 아이콘은 접미사로 표시됩니다. 이러한 아이콘은 and IgxPickerClearComponent를 IgxPickerToggleComponent 사용하여 변경하거나 재정의할 수 있습니다. 입력의 시작 부분 또는 끝에서 각각 위치를 정의하는 또는 또는 igxSuffix 중 하나 igxPrefix로 장식할 수 있습니다.

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

날짜 범위 선택기에 시작 날짜와 종료 날짜에 대한 두 개의 개별 입력이 있는 경우 기본적으로 이러한 아이콘이 노출되지 않습니다. and 는 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 및 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>

​inputFormat 속성이 설정되지 않은 경우 입력 형식은 숫자 날짜-시간 부분만 포함하는 것으로 구문 분석될 수 있는 경우 에서 유추 displayFormat 됩니다.

Note

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

Forms and Validation

날짜 범위 선택기 구성 요소는 코어의 모든 지시문을 지원합니다. 양식 모듈, Ng모델 그리고 ReactiveForms모듈 (FormControl, FormGroup 등). 여기에는 양식 유효성 검사기 함수. 또한 구성 요소의 최소 및 최대 값 그리고 disabled날짜 또한 양식 유효성 검사기 역할도 합니다.

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

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>

달력 헤더의 헤더, 하위 헤더 및 제목 부분은 다음과 igxCalendarSubheader​ ​igxCalendarHeaderTitle 같은 템플릿 지시문을 활용하여 igxCalendarHeader 사용자 정의할 수 있습니다.

<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에 영향을 미칩니다. 날짜 범위 선택기 구성 요소는 입력 그룹 및 달력 테마를 사용하므로 calendar-theme 및 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

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

: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 포럼
• ​GitHub Ignite UI for Angular