Angular Time Picker 개요

    시간 선택기 구성요소를 사용하면 사용자는 드롭다운이나 스피너가 있는 대화상자에서 '날짜' 개체의 시간 부분을 입력하거나 선택할 수 있으며, 이는 입력 필드에 미러링됩니다. 기본 모드인 드롭다운 모드에서는 입력 필드를 편집할 수 있으며 사용자는 선택한 시간도 편집할 수 있습니다.

    시간 선택기 구성 요소에는 시계 버튼을 표시하기 위한 다양한 내장 템플릿과 유효성 검사, 사용자 정의 시간 형식 지정 등과 같은 기능이 있습니다.

    Angular 시간 선택기 예제

    일반적으로 사용자는 텍스트 입력을 통해 또는 Angular Time Picker 드롭다운에서 시간 값을 선택하여 선호하는 시간을 입력할 수 있습니다. 아래의 기본 Angular Time Picker 예는 사용자가 드롭다운이나 키보드를 사용하여 값을 쉽게 입력하는 방법을 보여줍니다.

    EXAMPLE
    TS
    HTML
    SCSS

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

    Ignite UI for Angular Time Picker 시작하기

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

    ng add igniteui-angular
    cmd

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

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

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

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

    이제 Ignite UI for Angular 가져왔으므로 igx-time-picker 구성 요소를 사용할 수 있습니다.

    Angular 시간 선택기 사용

    기본

    템플릿에 시간 선택기를 추가하려면 다음 코드를 사용하세요.

    <!--meeting.component.html-->
    <igx-time-picker></igx-time-picker>
    html

    출력은 데모의 출력과 동일해야 합니다.

    제본

    Angular의 시간 선택기는 Date 객체나 시간 전용 문자열 값에 바인딩될 수 있습니다. ISO 8601 설정하여 형식을 지정하세요 value 재산 또는 ngModel.

    먼저 ISO 8601 형식으로 시간 문자열을 만듭니다.

    public time = '09:15:30';
    typescript

    그런 다음 ngModel 사용하여 양방향 데이터 바인딩을 만듭니다.

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

    또는 템플릿에 value 입력을 설정합니다.

    <igx-time-picker [value]="time"></igx-time-picker>
    html

    반응형 양식에서 사용하려면 선택기에서 formControlName 설정해야 합니다.

    <form [formGroup]="form">
        <igx-time-picker formControlName="timePicker"></igx-time-picker>
    </form>
    html
    export class SampleFormComponent {
        // ...
        public form: FormGroup;
        constructor(private fb: FormBuilder) {
            this.form = this.fb.group({
                timePicker: ['', Validators.required]
            });
        }
    }
    typescript

    투영 구성요소

    시간 선택기 구성요소를 사용하면 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>
    html
    public date: Date = new Date();
    typescript

    Ignite UI for Angular 다음과 같습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    사용자 정의 작업 버튼

    그만큼 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>
    html
    // sample.component.ts
    ...
    public selectNow(timePicker: IgxTimePickerComponent) {
        timePicker.value = new Date();
        timePicker.close();
    }
    ...
    typescript

    드롭다운, 사용자 지정 작업 및 양방향 바인딩 지원을 포함하는 템플릿이 다시 지정된 시간 선택기가 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    App Builder | CTA 배너

    토글 및 지우기 아이콘 사용자 정의

    IgxTimePickerComponentIgxPickerToggleComponentIgxPickerClearComponent로 구성할 수 있으며, 이를 사용하면 자체 클릭 핸들러를 추가하지 않고도 토글 및 지우기 아이콘을 변경할 수 있습니다.

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

    키보드 탐색

    • 사용자는 키보드 위쪽아래쪽 화살표 키를 사용하거나 입력 필드 및 드롭다운/대화 상자에서 스크롤하여 구성 요소의 시간 부분을 탐색할 수 있습니다. minValue 또는 maxValue에 관계없이 입력 탐색이 가능하지만 드롭다운/대화 상자 탐색은 minValuemaxValue 범위 내에서 제한됩니다.
    • 시간 선택기 드롭다운은 토글 아이콘 클릭, 스페이스 키 또는 Alt + 아래쪽 키를 눌러 열 수 있습니다. 대화 상자 모드에서는 입력 클릭으로 이를 수행할 수 있습니다.
    • 드롭다운/대화상자 외부에서 Enter 키를 누르거나 마우스를 클릭하면 선택 사항이 적용되고 드롭다운/대화상자가 닫힙니다.
    • Esc 키를 누르면 선택이 취소되고 드롭다운/대화 상자가 닫힙니다.
    • 드롭다운이 닫혀 있는 동안 새 값을 입력하면 시간 선택기 외부를 클릭하거나 Tab 키를 눌러 값이 적용되도록 포커스를 이동합니다.

    대화 모드

    기본 시간 선택기 모드는 편집 가능한 드롭다운 모드입니다. 시간 선택기 모드를 읽기 전용 대화 상자 모드로 변경하려면 mode 입력을 dialog로 설정하십시오.

    // timePickerDropdown.component.ts
    
    import { PickerInteractionMode } from 'igniteui-angular';
    // import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
    ...
    public mode = PickerInteractionMode.Dialog;
    typescript
    <!--timePickerDropdown.component.html-->
    <igx-time-picker [mode]="mode"></igx-time-picker>
    html

    또는 다음과 같이 시간 선택기에서 mode 변경하세요.

    <!--timePickerDropdown.component.html-->
    <igx-time-picker mode="dialog"></igx-time-picker>
    html

    대화상자 모드에서 대화상자 헤더는 선택기의 input format으로 현재 선택된 시간을 표시합니다. headerOrientation 속성을 설정하여 헤더 위치를 변경할 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    minValuemaxValue가 설정되면 대화 상자에는 해당 범위 내의 시간만 표시됩니다. 자세한 내용은 아래 최소값 예시를 참조하세요.

    표시 및 입력 형식

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

    표시 형식은 편집 모드일 때 값의 형식이며 나열된 Angular DatePipe 형식 중 하나일 수 있습니다. 이를 통해 shortTimelongTime과 같은 미리 정의된 형식 옵션을 지원할 수 있습니다.

    입력 형식은 편집 모드가 아닐 때 값의 형식이며 시간 부분이 드롭다운/대화 상자에 표시되는 형식입니다. 이 inputFormat 속성은 DatePipe에서 지원하는 문자(예: hh:mm:ss and)를 사용하여 생성된 형식 문자열을 허용하지만 and longTime와 같은 shortTime 미리 정의된 형식 옵션은 지원하지 않습니다. inputFormat 속성이 정의되지 않은 경우 기본값은 다음과 같습니다 hh:mm tt. 또는 속성이 설정되지 않은 경우 inputFormat 숫자 날짜-시간 부분만 포함하는 것으로 구문 분석될 수 있는 경우 입력 형식이 유추 displayFormat 됩니다.

    <igx-time-picker
        [(ngModel)]="time"
        [inputFormat]="`hh:mm:ss`"
        [displayFormat]="`shortTime`">
    </igx-time-picker>
    html

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

    증가 및 감소

    시간 선택기는 public incrementdecrement methods를 노출하며, 이는 두 개의 선택적 매개 변수, 즉 DatePart 수정할 항목과 delta 변경될 매개 변수를 허용합니다. 지정하지 않으면 기본값과 DatePart​ ​Hours 기본값이 delta to itemsDelta 입니다.

    Date Time Editor Directive에서 두 방법의 사용을 보여주는 샘플을 찾을 수 있습니다.

    양식 및 검증

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

    Reactive Forms Integration 샘플은 Reactive Forms에서 igxTimePicker를 사용하는 방법을 보여줍니다.

    최소 최대 값

    minValuemaxValue 지정하여 사용자 입력을 제한할 수 있습니다. 이 경우 드롭다운/대화 상자에는 해당 범위 내의 시간만 표시됩니다. 그러나 드롭다운 모드에서는 사용자가 잘못된 시간을 입력할 수 있습니다. 이런 일이 발생하면 사용자에게 알리기 위해 validationFailed 이벤트를 처리할 수 있습니다.

    최소/최대 값은 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();
    }
    typescript
    <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>
    
    html

    드롭다운에는 항목 델타를 기준으로 최소/최대 범위(09:15:30 AM~06:15:30 PM) 내의 값이 표시됩니다. 잘못된 시간을 입력했을 때 메시지를 표시하기 위해 토스트가 추가됩니다.

    드롭다운/대화 상자의 각 시간 부분에 대해 표시되는 값은 항상 0부터 시작하는 항목 델타를 기준으로 계산됩니다. minValuemaxValue가 항목 델타와 일치하지 않는 경우 표시된 값은 임계값과 일치하는 다음/마지막 값에서 시작/종료됩니다.

    그리고 거기에 우리는 그것을 가지고 있습니다:

    EXAMPLE
    TS
    HTML
    SCSS

    날짜 및 시간 선택기를 함께 사용

    IgxDatePicker와 IgxTimePicker가 함께 사용되는 경우에 따라 하나의 동일한 Date 객체 값에 바인딩해야 할 수도 있습니다.

    템플릿 기반 양식에서 이를 달성하려면 ngModel 사용하여 두 구성 요소를 동일한 Date 개체에 바인딩합니다.

    EXAMPLE
    TS
    HTML
    SCSS

    반응형 양식에서는 각 구성 요소의 valueChange 이벤트를 처리하고 다른 구성 요소의 값을 업데이트할 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS

    스타일링

    시간 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 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

    가장 간단한 접근 방식에 따라 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
    );
    scss

    시간 선택기 창 콘텐츠(예: IgxButton)의 일부로 사용되는 추가 구성 요소의 스타일을 지정하려면 해당 구성 요소와 관련된 추가 테마를 생성해야 하며 대화 상자 창의 범위에만 배치되어야 합니다. 나머지 애플리케이션에는 영향을 미치지 않습니다.)

    시간 선택 창은 IgxOverlayService 사용하므로 사용자 정의 테마가 스타일을 지정하려는 시간 선택 창에 도달할 수 있도록 대화 상자 창이 표시될 때 DOM에 배치될 특정 콘센트를 제공합니다.

    시간 선택기의 항목 아니다 우리 구성 요소의 후손 host- 현재 기본 오버레이 아웃렛에 표시되고 있습니다. document 몸. 이것을 변경하는 것은 다음을 사용하여 수행됩니다. outlet에 있는 재산 overlaySettings. 그만큼 outlet 오버레이 컨테이너를 렌더링해야 하는 위치를 제어합니다.

    여기에서 컨테이너를 배치할 요소에 대한 참조를 전달할 수 있습니다.

    <igx-time-picker #picker [overlaySettings]="{ outlet: element }">
    </igx-time-picker>
    html
    export class TimepickerStylingComponent {
        constructor(public element: ElementRef) {
        }
    }
    typescript

    이제 시간 선택기의 항목이 구성 요소의 호스트 내부에 올바르게 렌더링되므로 사용자 정의 테마가 적용됩니다.

    IgxOverlayService 사용하여 표시되는 요소에 테마를 제공하는 다양한 옵션에 대해 자세히 알아보려면 오버레이 스타일 항목을 살펴보세요.

     @include css-vars($my-time-picker-theme);
    scss

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

    :host {
      ::ng-deep {
        @include css-vars($my-time-picker-theme);
      }
    }
    scss

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    API 참조

    테마 종속성

    추가 리소스

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