feat(month picker): month picker POC #3126

IgniteUI · Feb 8, 2019 · 41b9cab · 41b9cab
1 parent c5f73a2
commit 41b9cab
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 5 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -207,13 +207,28 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
     get activeView(): CalendarView {
         return this._activeView;
     }
+    /**
+     * Sets the current active view of the calendar.
+     * ```typescript
+     * this.calendar.activeView = activeView;
+     * ```
+     */
+    set activeView(val: CalendarView) {
+        this._activeView = val;
+    }
 
     /**
      * @hidden
      */
     get monthAction(): string {
         return this._monthAction;
     }
+    /**
+     * @hidden
+     */
+    set monthAction(val: string) {
+        this._monthAction = val;
+    }
     /**
      * Gets the header template.
      * ```typescript

diff --git a/projects/igniteui-angular/src/lib/month-picker/month-picker.component.html b/projects/igniteui-angular/src/lib/month-picker/month-picker.component.html
@@ -0,0 +1,28 @@
+<div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body">
+    <div class="igx-calendar-picker">
+        <div class="igx-calendar-picker__prev" (click)="previousYear()">
+            <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
+        </div>
+        <div>
+            <span (click)="activeViewDecade()" class="igx-calendar-picker__date">
+                {{ formattedYear(viewDate) }}
+            </span>
+        </div>
+        <div class="igx-calendar-picker__next" (click)="nextYear()">
+            <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
+        </div>
+    </div>
+
+    <igx-months-view [@animateChange]="animateAction" #months style="height: 308px"
+                     [date]="viewDate"
+                     [locale]="locale"
+                     [monthFormat]="_formatOptions.month"
+                     (onMonthSelection)="selectMonth($event)" >
+    </igx-months-view>
+</div>
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+                [date]="viewDate"
+                [locale]="locale"
+                [yearFormat]="_formatOptions.year"
+                (onYearSelection)="selectYear($event)">
+</igx-years-view>
diff --git a/projects/igniteui-angular/src/lib/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/month-picker/month-picker.component.ts
@@ -0,0 +1,80 @@
+import {
+    Component,
+    NgModule
+} from '@angular/core';
+import { IgxCalendarModule, CalendarView, IgxCalendarComponent } from '../calendar/index';
+import { IgxIconModule } from '../icon/index';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { trigger, transition, useAnimation } from '@angular/animations';
+import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../animations/main';
+
+@Component({
+    providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: IgxMonthPickerComponent
+        }
+    ],
+    animations: [
+        trigger('animateView', [
+            transition('void => 0', useAnimation(fadeIn)),
+            transition('void => *', useAnimation(scaleInCenter, {
+                params: {
+                    duration: '.2s',
+                    fromScale: .9
+                }
+            }))
+        ]),
+        trigger('animateChange', [
+            transition('* => prev', useAnimation(slideInLeft, {
+                params: {
+                    fromPosition: 'translateX(-30%)'
+                }
+            })),
+            transition('* => next', useAnimation(slideInRight, {
+                params: {
+                    fromPosition: 'translateX(30%)'
+                }
+            }))
+        ])
+    ],
+    selector: 'igx-month-picker',
+    templateUrl: 'month-picker.component.html'
+})
+export class IgxMonthPickerComponent extends IgxCalendarComponent implements ControlValueAccessor {
+
+    public animateAction = '';
+
+    public previousYear() {
+        this.animateAction = 'prev';
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
+    }
+
+    public nextYear() {
+        this.animateAction = 'next';
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
+    }
+
+    public selectMonth(event: Date) {
+        this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
+        this._onChangeCallback(this.viewDate);
+    }
+
+    public selectYear(event: Date) {
+        this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
+        this.activeView = CalendarView.DEFAULT;
+
+        requestAnimationFrame(() => {
+            this.monthsView.el.nativeElement.focus();
+        });
+    }
+}
+
+@NgModule({
+    declarations: [IgxMonthPickerComponent],
+    exports: [IgxMonthPickerComponent],
+    imports: [CommonModule, IgxIconModule, IgxCalendarModule]
+})
+export class IgxMonthPickerModule { }
diff --git a/src/app/calendar-views/calendar-views.sample.html b/src/app/calendar-views/calendar-views.sample.html
@@ -5,18 +5,27 @@
             <div class="calendar-sample" style="width: 400px">
                 <h4 class="sample-title">Default Calendar</h4>
                 <igx-card>
-                    <igx-calendar name="calendar" [(ngModel)]="date1" #calendar
-                                                  [viewDate]="date1"
+                    <igx-calendar name="calendar" [(ngModel)]="dates" #calendar
+                                                  [viewDate]="dates[0]"
                                                   [weekStart]="'1'"
                                                   [locale]="locale"
                                                   [specialDates]="specialDates"
                                                   [disabledDates]="disabledDates"
-                                                  [selection]="'single'">
+                                                  [selection]="'multi'">
                     </igx-calendar>
                 </igx-card>
             </div>
-            {{ date1 }}
+            {{ dates }}
         </article>
+        <article class="sample-column">
+                <div class="calendar-sample" style="width: 400px">
+                    <h4 class="sample-title">Month Picker</h4>
+                    <igx-card>
+                        <igx-month-picker [(ngModel)]="date1" [viewDate]="date1"></igx-month-picker>
+                    </igx-card>
+                </div>
+                {{ date1 }}
+            </article>
     </section>
     <div class="sample-content">
         <section class="sample-content">

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -37,6 +37,7 @@ import {
     IgxToggleModule,
     IgxTooltipModule
 } from 'igniteui-angular';
+import { IgxMonthPickerModule } from 'projects/igniteui-angular/src/lib/month-picker/month-picker.component';
 
 const igniteModules = [
     IgxAvatarModule,
@@ -74,7 +75,8 @@ const igniteModules = [
     IgxTimePickerModule,
     IgxToastModule,
     IgxToggleModule,
-    IgxTooltipModule
+    IgxTooltipModule,
+    IgxMonthPickerModule
 ];
 
 @NgModule({