Angular 월 선택기 구성 요소 개요

    Ignite UI for Angular 월-연도 달력 보기를 사용하여 특정 월과 연도를 선택하는 쉽고 직관적인 방법을 제공합니다. 구성 요소를 사용하면 해당 값을 날짜 개체에 바인딩할 수 있으며 사용자는 월 선택 구성 요소 UI를 통해 날짜 개체의 월 및 연도 부분을 변경할 수 있습니다. 현지화도 지원합니다.

    Angular Month Picker Example

    여기에 표시되는 것은 사용자가 연도와 월을 선택할 수 있도록 하는 구성 요소의 기본 보기가 포함된 기본 Angular 월 선택기 예입니다.

    Getting Started with Ignite UI for Angular Month Picker

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

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    첫 번째 단계는 IgxCalendarModule 우리 안에 app.module.ts 파일.

    Note

    ​IgxMonthPickerComponent는 터치 상호 작용을 위해 BrowserAnimationsModule 및 HammerModule 에도 의존하므로 AppModule에도 추가해야 합니다.

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

    또는 16.0.0부터 IgxMonthPickerComponent 독립 실행형 종속성으로 가져오거나 IGX_CALENDAR_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxMonthPickerComponent } from 'igniteui-angular';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-month-picker></igx-month-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}

    이제 Ignite UI for Angular 또는 Month Picker 구성 요소를 가져왔으므로 igx-month-picker 구성 요소 사용을 시작할 수 있습니다.

    Note

    ​IgxMonthPickerComponent는 날짜 현지화 및 형식 지정을 위해 Intl WebAPI를 사용합니다. 대상 플랫폼이 이를 지원하지 않는 경우 적절한 폴리필 사용을 고려하세요.

    Using the Angular Month Picker

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

    <!-- month-picker-sample.component.html -->

<igx-month-picker></igx-month-picker>

    Setting date

    ​value 입력을 사용하여 날짜를 IgxMonthPickerComponent로 설정합니다.

    // month-picker-sample.component.ts

public date: Date = new Date();

    <!-- month-picker-sample.component.html -->

<igx-month-picker [value]="date"></igx-date-picker>

    양방향 데이터 바인딩을 만들려면 ngModel 다음과 같이 설정하세요.

    <!-- month-picker-sample.component.html -->

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

    Formatting

    ​formatOptions 입력을 사용하여 월 선택 표시 형식을 변경합니다.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public numericFormatOptions = {
    month: '2-digit'
};

    Localization

    ​locale 입력을 사용하여 Ignite UI for Angular 사용자 정의합니다.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};

    다음은 월 선택기 구성 요소를 지역화하고 형식을 지정하는 예입니다.

    키보드 탐색

    • ​igxMonthPicker 구성 요소에 초점이 맞춰지면 다음을 사용하세요.

      • PageUp 키는 전년도로 이동하고,
      • PageDown 키를 누르면 다음 연도로 이동하고,
      • 올해의 첫 달을 포커스하는 홈 키,
      • 해당 연도의 마지막 달에 초점을 맞추는 End 키,
      • 하위 헤더 버튼을 탐색하려면 Tab 키를 사용하세요.

    • ​< (이전) 또는 > (다음) 연도 버튼(하위 헤더)에 초점이 맞춰진 경우

      • 다음 또는 이전 연도를 보려면 스크롤하려면 스페이스 나 Enter 키를 누르세요.

    • 연도 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

      • 연도 보기를 열려면 Space 또는 Enter 키를 누르세요.
      • 이전/다음 연도를 스크롤하여 보려면 오른쪽 또는 왼쪽 화살표 키를 사용하세요.

    • 월 보기 내 월에 초점이 맞춰지면 다음을 사용하세요.

      • 달을 탐색하려면 화살표 키를 사용하세요.
      • 월 보기 내에서 첫 번째 달에 초점을 맞추는 홈 키,
      • 월 보기 내에서 지난 달에 초점을 맞추는 종료 키,
      • 현재 초점이 맞춰진 월을 선택하고 보기를 닫으려면 키를 입력하세요.
      • 월을 탐색하려면 Tab 키를 사용하세요.

    스타일링

    월 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    월 선택기는 달력 테마를 사용하므로 calendar-theme 확장하는 새 테마를 만들고 해당 매개변수 중 일부를 사용하여 월 선택기 항목의 스타일을 지정해야 합니다.

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background-color: #011627,
  $month-current-text-color: #ECAA53,
  $month-hover-background: #ECAA53,
  $year-current-text-color: #ECAA53,
  $year-hover-text-color: #D37B08,
  $picker-arrow-color: #ECAA53,
  $picker-text-hover-color: #D37B08,
  $picker-arrow-hover-color: #D37B08,
  $picker-text-color: #ECAA53
);

    Including themes

    다음 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

    ​$legacy-support​ ​true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.

     @include calendar($my-calendar-theme);
    Note

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

    :host {
     ::ng-deep {
        @include calendar($my-calendar-theme);
    }
}

    ​$legacy-support​ ​false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.

    @include css-vars($my-calendar-theme);
    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.

    :host {
    @include css-vars($my-calendar-theme);
}

    모든 작업이 완료되면 구성 요소는 다음과 같아야 합니다.

    Demo

    API References

    Theming Dependencies

    Additional Resources

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