Angular 날짜 범위 선택기 구성 요소 개요
Angular Date Range Picker는 텍스트 입력과 캘린더 팝업을 포함하는 가벼운 구성 요소로, 사용자가 시작 및 종료 날짜 값을 쉽게 선택할 수 있습니다. 범위 제한, 형식, 데이터 범위 선택, 시작 및 종료 값 그룹화 등과 같은 기능을 통해 앱 요구 사항에 맞게 사용자 정의할 수 있습니다. Angular의 Date Range Picker를 사용하면 개발자가 기본 뷰 속성을 변경하고 월, 년 또는 다년으로 설정할 수도 있습니다.
Angular 날짜 범위 선택기 예제
우리는 이 기본 Angular Date Range Picker 예제를 만들어서 컴포넌트가 작동하는 모습을 보여드렸습니다. 이 경우, 사용자가 시작 및 종료 날짜 값을 선택할 수 있는 달력 팝업이 표시됩니다.
이 샘플이 마음에 드시나요? 전체 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 파일.
만큼 IgxDateRangePicker
는 IgxCalendar컴포넌트, 또한 에 대한 종속성이 있습니다. 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 구성 요소는 시작 및 종료 날짜에 대한 두 개의 별도 입력을 구성할 수도 있습니다. 이는 아래 데모에서 볼 수 있듯이 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>
html
-
IgxDateRangeStartComponent
및IgxDateRangeEndComponent
모두 기존IgxInputGroupComponent
확장합니다. 이러한 구성이 작동하려면IgxInput
을 정의해야 합니다. 또한IgxInputGroupComponent
에 사용 가능한 다른 모든 구성 요소와 지시문도 사용할 수 있습니다. - 두 입력 모두에 대해 날짜 편집을 활성화하려면
igxDateTimeEditor
지시어로 장식해야 합니다.
사용자 경험
단일 읽기 전용 입력이 있는 기본 구성에서는 달력 아이콘을 포함하여 입력의 아무 곳이나 클릭하여 달력을 열 수 있습니다. 시작 날짜와 종료 날짜에 대해 두 개의 별도 입력이 있는 경우 두 입력 모두 기본적으로 편집 가능하므로 달력은 달력 아이콘에서만 열 수 있습니다.
달력이 표시되면 시작 날짜와 종료 날짜를 선택하여 범위를 선택할 수 있습니다. 날짜를 선택하면 두 번째 날짜를 선택할 때까지 시작 날짜와 종료 날짜가 설정됩니다. 선택한 범위가 있는 경우 달력에서 다른 날짜를 클릭하면 새 범위 선택이 시작됩니다.
시작 날짜와 종료 날짜는 구성 요소의 읽기 전용 입력에 표시될 때 하이픈으로 구분됩니다. 시작과 끝에 대해 서로 다른 입력을 정의할 때 해당 입력은 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
범위 값은 달력에서 날짜를 선택할 때 설정됩니다. 드롭다운 모드에서는 Done
버튼을 사용할 수 없습니다.
사용자 정의 작업 버튼
날짜 범위 선택기의 작업 버튼은 igxPickerActions
지시문을 사용하여 템플릿화할 수 있습니다. 일반적인 시나리오는 다음 데모와 같이 사용자가 미리 정의된 범위에서 선택할 수 있도록 허용하는 것입니다.
키보드 탐색
대화 모드 및 별도의 편집 가능한 입력 표시에 대한 데모를 사용하여 아래에 정의된 키보드 조합을 사용해 보세요.
키보드를 사용하여 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 형식 중 하나일 수 있습니다. 이를 통해 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>
html
inputFormat
속성이 설정되지 않은 경우 입력 형식은 숫자 날짜-시간 부분만 포함하는 것으로 구문 분석될 수 있는 경우 에서 유추 displayFormat
됩니다.
IgxDateRangePicker
는 이제 IME 입력을 지원합니다. 작성이 끝나면 컨트롤은 와이드 문자 숫자를 ASCII 문자로 변환합니다.
양식 및 검증
날짜 범위 선택기 구성 요소는 핵심 FormsModule, NgModel 및 ReactiveFormsModule (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
최소값 및 최대값
minValue
및 maxValue
속성을 지정하면 해당 값으로 정의된 범위를 벗어나는 달력 날짜를 비활성화하여 사용자 입력을 제한할 수 있습니다.
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
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>
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
스타일링
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
, 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
);
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 오버레이 스타일) 및 입력 그룹 범위 지정 스타일을 모두 참조해야 합니다.
애플리케이션 데모
아래 데모에서는 IgxDateRangePickerComponent
를 사용하는 항공권 양식을 정의합니다. 날짜를 선택하지 않으면 IgxHint
사용하여 유효성 검사 오류를 표시합니다. 날짜 선택은 IgxDateRangePickerComponent
의 minValue
및 maxValue
속성에 의해 제한됩니다.
API 참조
- IgxDateRangePickerComponent
- IgxCalendar구성 요소
- IgxCalendarComponent 스타일
- Igx오버레이 스타일
- IgxInputGroupComponent
테마 종속성
추가 리소스
관련 주제:
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.