Angular 시간 선택기 개요
시간 선택기 구성요소를 사용하면 사용자는 드롭다운이나 스피너가 있는 대화상자에서 '날짜' 개체의 시간 부분을 입력하거나 선택할 수 있으며, 이는 입력 필드에 미러링됩니다. 기본 모드인 드롭다운 모드에서는 입력 필드를 편집할 수 있으며 사용자는 선택한 시간도 편집할 수 있습니다.
시간 선택기 구성 요소에는 시계 버튼을 표시하기 위한 다양한 내장 템플릿과 유효성 검사, 사용자 정의 시간 형식 지정 등과 같은 기능이 있습니다.
Angular Time Picker Example
일반적으로 사용자는 텍스트 입력을 통해 또는 Angular 시간 선택기 드롭다운에서 시간 값을 선택하여 원하는 시간을 입력할 수 있습니다. 아래의 기본 Angular 시간 선택기 예는 사용자가 드롭다운을 사용하거나 키보드를 사용하여 값을 쉽게 입력할 수 있는 방법을 보여줍니다.
Getting Started with Ignite UI for Angular Time Picker
Ignite UI for Angular Time Picker 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
다음 단계는 IgxTimePickerModule 당신의 app.module.ts 파일.
Note
IgxTimePicker는 터치 상호 작용을 위해 BrowserAnimationsModule 및 HammerModule 에도 종속됩니다. AppModule에도 추가해야 합니다.
// app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule } from 'igniteui-angular';
// import { IgxTimePickerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., BrowserAnimationsModule, HammerModule, IgxTimePickerModule],
...
})
export class AppModule {}
또는 16.0.0부터 IgxTimePickerComponent 독립형 종속성으로 가져오거나 IGX_TIME_PICKER_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-time-picker [(ngModel)]="time"></igx-time-picker>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_TIME_PICKER_DIRECTIVES, FormsModule]
/* or imports: [IgxTimePickerComponent, FormsModule] */
})
export class HomeComponent {
public time: Date;
}
이제 Ignite UI for Angular 가져왔으므로 igx-time-picker 구성 요소 사용을 시작할 수 있습니다.
Using the Angular Time Picker
Default
템플릿에 시간 선택기를 추가하려면 다음 코드를 사용하세요.
<!--meeting.component.html-->
<igx-time-picker></igx-time-picker>
출력은 데모의 출력과 동일해야 합니다.
Binding
Angular의 시간 선택기는 Date 객체 또는 시간 전용 문자열 값에 바인딩될 수 있습니다. ISO 8601 설정하여 형식을 지정합니다. value 재산 또는 ngModel.
먼저 ISO 8601 형식으로 시간 문자열을 만듭니다.
public time = '09:15:30';
그런 다음 ngModel 사용하여 양방향 데이터 바인딩을 만듭니다.
<igx-time-picker [(ngModel)]="time"></igx-time-picker>
또는 템플릿에 value 입력을 설정합니다.
<igx-time-picker [value]="time"></igx-time-picker>
반응형 양식에서 사용하려면 선택기에서 formControlName 설정해야 합니다.
<form [formGroup]="form">
<igx-time-picker formControlName="timePicker"></igx-time-picker>
</form>
export class SampleFormComponent {
// ...
public form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
timePicker: ['', Validators.required]
});
}
}
Projecting components
시간 선택기 구성요소를 사용하면 IgxInputGroupComponent 에서와 동일하게 igxLabel, IgxHint, igxPrefix, igxSuffix를 제외하고 IgxInput 투영할 수 있습니다. 이에 대한 자세한 내용은 레이블 및 입력 항목에서 확인할 수 있습니다.
기본 구성에서는 드롭다운/대화 상자 토글 아이콘이 접두어로 표시됩니다. IgxPickerToggleComponent 구성 요소를 사용하여 변경하거나 재정의할 수 있습니다. igxPrefix 또는 igxSuffix로 장식할 수 있으며 각각 입력 시작 또는 끝 위치를 정의합니다.
다음 예에서는 사용자 정의 레이블과 힌트를 추가하고 접미사로 표시되도록 기본 토글 아이콘 위치를 변경했습니다.
<igx-time-picker [(ngModel)]="date" mode="dialog" [inputFormat]="'hh:mm'">
<label igxLabel>Home Time </label>
<igx-picker-toggle igxSuffix>
<igx-icon>home</igx-icon>
</igx-picker-toggle>
<igx-hint>{{date.toLocaleString()}}</igx-hint>
</igx-time-picker>
public date: Date = new Date();
다음은 Ignite UI for Angular 입니다.
Custom action buttons
그만큼 IgxTimePickerComponent 작업 버튼 사용자 정의를 지원합니다. 이를 달성하려면 버튼을 ng-template으로 표시 igxPickerActions 지시어 선택자.
아래 예에서는 'CANCEL', 'DONE' 및 'NOW' 작업에 대한 사용자 정의 작업 버튼이 추가되었습니다.
<!-- sample.component.html -->
<igx-time-picker #picker format="hh:mm" mode="dropdown">
<ng-template igxTimePickerActions>
<div class="container action-buttons">
<button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
<button igxButton="flat" (click)="picker.okButtonClick()">done</button>
<button igxButton="flat" (click)="selectNow(picker)">now</button>
</div>
</ng-template>
</igx-time-picker>
// sample.component.ts
...
public selectNow(timePicker: IgxTimePickerComponent) {
timePicker.value = new Date();
timePicker.close();
}
...
드롭다운, 사용자 지정 작업 및 양방향 바인딩 지원을 포함하는 템플릿이 다시 지정된 시간 선택기가 있습니다.
Customizing the toggle and clear icons
IgxTimePickerComponent는 IgxPickerToggleComponent 및 IgxPickerClearComponent로 구성할 수 있으며, 이를 사용하면 자체 클릭 핸들러를 추가하지 않고도 토글 및 지우기 아이콘을 변경할 수 있습니다.
<igx-time-picker>
<label igxLabel>Select time</label>
<igx-picker-toggle igxPrefix>
<igx-icon>snooze</igx-icon>
</igx-picker-toggle>
<igx-picker-clear igxSuffix>
<igx-icon>delete</igx-icon>
</igx-picker-clear>
</igx-time-picker>
Keyboard Navigation
- 사용자는 키보드 위쪽 및 아래쪽 화살표 키를 사용하거나 입력 필드 및 드롭다운/대화 상자에서 스크롤하여 구성 요소의 시간 부분을 탐색할 수 있습니다.
minValue또는maxValue에 관계없이 입력 탐색이 가능하지만 드롭다운/대화 상자 탐색은minValue및maxValue범위 내에서 제한됩니다. - 시간 선택기 드롭다운은 토글 아이콘 클릭, 스페이스 키 또는 Alt + 아래쪽 키를 눌러 열 수 있습니다. 대화 상자 모드에서는 입력 클릭으로 이를 수행할 수 있습니다.
- 드롭다운/대화상자 외부에서 Enter 키를 누르거나 마우스를 클릭하면 선택 사항이 적용되고 드롭다운/대화상자가 닫힙니다.
- Esc 키를 누르면 선택이 취소되고 드롭다운/대화 상자가 닫힙니다.
- 드롭다운이 닫혀 있는 동안 새 값을 입력하면 시간 선택기 외부를 클릭하거나 Tab 키를 눌러 값이 적용되도록 포커스를 이동합니다.
Examples
Dialog Mode
기본 시간 선택기 모드는 편집 가능한 드롭다운 모드입니다. 시간 선택기 모드를 읽기 전용 대화 상자 모드로 변경하려면 mode 입력을 dialog로 설정하십시오.
// timePickerDropdown.component.ts
import { PickerInteractionMode } from 'igniteui-angular';
// import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
...
public mode = PickerInteractionMode.Dialog;
<!--timePickerDropdown.component.html-->
<igx-time-picker [mode]="mode"></igx-time-picker>
또는 다음과 같이 시간 선택기에서 mode 변경하세요.
<!--timePickerDropdown.component.html-->
<igx-time-picker mode="dialog"></igx-time-picker>
대화상자 모드에서 대화상자 헤더는 선택기의 input format으로 현재 선택된 시간을 표시합니다. headerOrientation 속성을 설정하여 헤더 위치를 변경할 수 있습니다.
minValue 및 maxValue가 설정되면 대화 상자에는 해당 범위 내의 시간만 표시됩니다. 자세한 내용은 아래 최소값 예시를 참조하세요.
Display and input format
시간 선택기 구성요소는 다양한 표시 및 입력 형식을 지원합니다.
표시 형식은 편집 모드에 있을 때의 값 형식이며 나열된 Angular DatePipe 형식 중 하나일 수 있습니다. 이를 통해 shortTime 및 longTime과 같은 미리 정의된 형식 옵션을 지원할 수 있습니다.
입력 형식은 편집 모드가 아닐 때의 값 형식과 시간 부분이 드롭다운/대화 상자에 표시되는 형식입니다. inputFormat 속성은 DatePipe에서 지원하는 문자(예 hh:mm:ss를 사용하여 구성된 형식 문자열을 허용하지만 shortTime 및 longTime과 같은 미리 정의된 형식 옵션은 지원하지 않습니다. inputFormat 속성이 정의되지 않은 경우 기본값은 hh:mm tt 입니다.
<igx-time-picker
[(ngModel)]="time"
[inputFormat]="`hh:mm:ss`"
[displayFormat]="`shortTime`">
</igx-time-picker>
Note
IgxTimePicker는 이제 IME 입력을 지원합니다. 작성이 끝나면 컨트롤은 와이드 문자 숫자를 ASCII 문자로 변환합니다.
Increment and decrement
시간 선택기는 공개적으로 노출됩니다. increment 그리고 decrement 두 개의 선택적 매개변수를 허용하는 메소드: DatePart 수정될 예정이며 delta 이에 따라 변경됩니다. 지정하지 않은 경우 DatePart 기본값은 Hours 그리고 delta 기본값은 itemsDelta.
Date Time Editor Directive에서 두 방법의 사용을 보여주는 샘플을 찾을 수 있습니다.
Forms and Validation
시간 선택기 구성 요소는 핵심 FormsModule NgModel 및 ReactiveFormsModule (FormControl, FormGroup 등)의 모든 지시문을 지원합니다. 여기에는 양식 유효성 검사기 기능도 포함됩니다. 또한 구성 요소의 최소 및 최대 값은 양식 유효성 검사기 역할도 합니다.
Reactive Forms Integration 샘플은 Reactive Forms에서 igxTimePicker를 사용하는 방법을 보여줍니다.
최소 최대 값
minValue 및 maxValue 지정하여 사용자 입력을 제한할 수 있습니다. 이 경우 드롭다운/대화 상자에는 해당 범위 내의 시간만 표시됩니다. 그러나 드롭다운 모드에서는 사용자가 잘못된 시간을 입력할 수 있습니다. 이런 일이 발생하면 사용자에게 알리기 위해 validationFailed 이벤트를 처리할 수 있습니다.
Note
최소/최대 값은 Date 객체이거나 ISO 8601 형식의 시간 전용 문자열이어야 합니다.
// app.module.ts
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';
// import { IgxTimePickerModule, IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., BrowserAnimationsModule, IgxTimePickerModule, IgxToastModule],
...
})
export class AppModule {}
// app.component.ts
public time = '10:00:00';
public min = '09:15:30';
public max = '18:15:30';
@ViewChild('toast', { static: true })
private toast;
public onValidationFailed() {
this.toast.open();
}
<igx-time-picker
[(ngModel)]="time"
[itemsDelta]="{hours:2, minutes:5}"
[inputFormat]="'hh:mm:ss tt'"
[headerOrientation]="true"
[minValue]="min"
[maxValue]="max"
(onValidationFailed)="onValidationFailed()">
<label igxLabel>Meeting Start</label>
</igx-time-picker>
<igx-toast #toast message="Value must be between 09:15:30 AM and 06:15:30 PM"></igx-toast>
드롭다운에는 항목 델타를 기준으로 최소/최대 범위(09:15:30 AM~06:15:30 PM) 내의 값이 표시됩니다. 잘못된 시간을 입력했을 때 메시지를 표시하기 위해 토스트가 추가됩니다.
Note
드롭다운/대화 상자의 각 시간 부분에 대해 표시되는 값은 항상 0부터 시작하는 항목 델타를 기준으로 계산됩니다. minValue 및 maxValue가 항목 델타와 일치하지 않는 경우 표시된 값은 임계값과 일치하는 다음/마지막 값에서 시작/종료됩니다.
그리고 거기에 우리는 그것을 가지고 있습니다:
날짜 및 시간 선택기를 함께 사용
IgxDatePicker와 IgxTimePicker가 함께 사용되는 경우에 따라 하나의 동일한 Date 객체 값에 바인딩해야 할 수도 있습니다.
템플릿 기반 양식에서 이를 달성하려면 ngModel 사용하여 두 구성 요소를 동일한 Date 개체에 바인딩합니다.
반응형 양식에서는 각 구성 요소의 valueChange 이벤트를 처리하고 다른 구성 요소의 값을 업데이트할 수 있습니다.
스타일링
시간 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 time-picker-theme 확장하고 시간 선택기 스타일을 지정하는 매개변수를 허용하는 새로운 테마를 만듭니다.
$my-time-picker-theme: time-picker-theme(
$text-color: #E4C8A5,
$hover-text-color: #ECAA53,
$selected-text-color: #ECAA53,
$header-background: #ECAA53,
$header-hour-text-color: #011627,
$header-time-period-color: #011627,
$background-color: #011627
);
Note
시간 선택기 창 콘텐츠(예: IgxButton)의 일부로 사용되는 추가 구성 요소의 스타일을 지정하려면 해당 구성 요소와 관련된 추가 테마를 생성해야 하며 대화 상자 창의 범위에만 배치되어야 합니다. 나머지 애플리케이션에는 영향을 미치지 않습니다.)
시간 선택 창은 IgxOverlayService 사용하므로 사용자 정의 테마가 스타일을 지정하려는 시간 선택 창에 도달할 수 있도록 대화 상자 창이 표시될 때 DOM에 배치될 특정 콘센트를 제공합니다.
시간 선택기의 항목 아니다 우리 구성 요소의 후손 host- 현재 기본 오버레이 아웃렛에 표시되고 있습니다. document 몸. 이것을 변경하는 것은 다음을 사용하여 수행됩니다. outlet에 있는 재산 overlaySettings. 그만큼 outlet 오버레이 컨테이너를 렌더링해야 하는 위치를 제어합니다.
여기에서 컨테이너를 배치할 요소에 대한 참조를 전달할 수 있습니다.
<igx-time-picker #picker [overlaySettings]="{ outlet: element }">
</igx-time-picker>
export class TimepickerStylingComponent {
constructor(public element: ElementRef) {
}
}
이제 시간 선택기의 항목이 구성 요소의 호스트 내부에 올바르게 렌더링되므로 사용자 정의 테마가 적용됩니다.
Note
IgxOverlayService 사용하여 표시되는 요소에 테마를 제공하는 다양한 옵션에 대해 자세히 알아보려면 오버레이 스타일 항목을 살펴보세요.
Including Themes
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
$legacy-support true로 설정된 경우 다음과 같은 테마를 포함합니다.
@include time-picker($my-time-picker-theme);
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.
:host {
::ng-deep {
@include time-picker($my-time-picker-theme);
}
}
$legacy-support false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.
@include css-vars($my-time-picker-theme);
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.
:host {
@include css-vars($my-time-picker-theme);
}
Demo
API References
- IgxIconComponent
- IgxInput 지시어
- IgxInputGroupComponent
- IgxTimePicker구성 요소
- IgxTimePicker구성 요소 스타일
- Igx오버레이서비스
- Igx오버레이 스타일
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub