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

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

    Angular 날짜 범위 선택기 예제

    우리는 이 기본 Angular Date Range Picker 예제를 만들어서 컴포넌트가 작동하는 모습을 보여드렸습니다. 이 경우, 사용자가 시작 및 종료 날짜 값을 선택할 수 있는 달력 팝업이 표시됩니다.

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular 시작하기

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

    ng add igniteui-angular
    cmd

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

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

    만큼 IgxDateRangePickerIgxCalendar컴포넌트, 또한 에 대한 종속성이 있습니다. BrowserAnimationsModule (브라우저애니메이션모듈) 그리고 필요해머 모듈 터치 상호 작용의 경우 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 {}
    typescript

    또는 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 {}
    typescript

    이제 Ignite UI for Angular Date Range Picker 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 igx-date-range-picker 수 있습니다.

    Angular Date Range Picker 구성 요소 사용

    표시 날짜 범위 선택기

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

    <igx-date-range-picker [value]="range"></igx-date-range-picker>
    html
    public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) };
    typescript

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

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

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

    투영 구성요소

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

    별도의 편집 가능한 입력 표시

    Angular Date Range Picker 구성 요소는 시작 및 종료 날짜에 대한 두 개의 별도 입력을 구성할 수도 있습니다. 이는 아래 데모에서 볼 수 있듯이 IgxDateRangeStartComponentIgxDateRangeEndComponent 날짜 범위 선택기의 자식으로 사용하여 달성할 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    SCSS

    사용자 경험

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

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

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

    상표

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

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

    캘린더 토글

    단일 읽기 전용 입력이 있는 기본 구성에서는 기본 달력 아이콘이 접두어로 표시됩니다. 달력 아이콘은 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>
    html

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

    대화 모드

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

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

    EXAMPLE
    TS
    HTML
    SCSS

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

    사용자 정의 작업 버튼

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

    EXAMPLE
    TS
    HTML
    SCSS

    키보드 탐색

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

    키보드를 사용하여 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 / 명령 +;- 편집기에서 현재 날짜와 시간을 설정합니다.

    서식 지정

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

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

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

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

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

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

    양식 및 검증

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

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

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

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

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

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

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

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

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

    EXAMPLE
    TS
    HTML
    SCSS

    최소값 및 최대값

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

    public minDate = new Date(2020, 1, 15);
    public maxDate = new Date(2020, 11, 1);
    typescript
    <igx-date-range-picker [(ngModel)]="range" required
        [minValue]="minDate" [maxValue]="maxDate">
    </igx-date-range-picker>
    html
    <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>
    html

    IgxDateRangePickerComponentminValuemaxValue 사용하여 내부적으로 유효성을 제어하는 유효성 검사기이기도 합니다. 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>
    html

    템플릿

    두 개의 편집기를 사용하는 경우 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>
    html
    App Builder | CTA 배너

    스타일링

    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';
    scss

    날짜 범위 선택기 구성요소는 date-range-picker-theme 노출하고 igxInputGroupComponent, igxCalendarigxOverlay를 포함한 여러 구성요소 및 지시어를 활용합니다. 앞서 언급한 구성 요소 및 지시문에 대한 전역 스타일은 igxDateRangeComponent에 영향을 미칩니다. 날짜 범위 선택기 구성 요소는 입력 그룹 및 달력 테마를 사용하므로 calendar-themeinput-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
    );
    scss

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

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

    구성 요소가 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);
      }
    }
    scss

    범위 지정 스타일

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

    EXAMPLE
    TS
    HTML
    SCSS

    애플리케이션 데모

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

    EXAMPLE
    TS
    HTML
    SCSS

    API 참조

    테마 종속성

    추가 리소스

    관련 주제:

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