Angular Month Picker 구성 요소 개요

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

    Angular 월 선택기 예제

    여기서 보이는 것은 기본 Angular Month Picker의 예이며, 사용자가 연도와 월을 선택할 수 있는 기본 뷰가 포함되어 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS

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

    Ignite UI for Angular Month Picker 시작하기

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

    ng add igniteui-angular
    cmd

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

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

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

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

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

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

    Angular Month Picker 사용

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

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

    설정 날짜

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

    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    typescript
    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [value]="date"></igx-date-picker>
    html

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

    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [(ngModel)]="date"></igx-date-picker>
    html

    서식 지정

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

    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public numericFormatOptions = {
        month: '2-digit'
    };
    typescript

    현지화

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

    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public locale: 'fr';
    public formatOptions = {
        month: 'long'
    };
    typescript

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

    EXAMPLE
    TS
    HTML
    SCSS

    키보드 탐색

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

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

      • 다음 또는 이전 연도를 보려면 스크롤하려면 스페이스Enter 키를 누르세요.
    • 연도 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

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

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

    스타일링

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

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

    $my-calendar-theme: calendar-theme(
      $border-radius: 15px,
      $content-background: #011627,
      $picker-background: #011627,
      $ym-current-foreground: #ecaa53,
      $ym-hover-background: #ecaa53,
      $navigation-color: #ecaa53,
      $picker-hover-foreground: #d37b08,
      $navigation-hover-color: #d37b08,
      $picker-foreground: #ecaa53,
    );
    scss

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

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

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

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    API 참조

    테마 종속성

    추가 리소스

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