feat(datepicker): Add initial view setting

edcarroll · Aug 8, 2017 · 27674ee · 27674ee
1 parent 6974405
commit 27674ee
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/demo/src/app/pages/modules/datepicker/datepicker.page.ts b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
-import { DatepickerMode } from "../../../../../../src/public";
+import { DatepickerMode, CalendarViewType } from "../../../../../../src/public";
 
 const exampleStandardTemplate = `
 <div class="ui form">
@@ -11,6 +11,7 @@ const exampleStandardTemplate = `
             <input suiDatepicker
                    [(ngModel)]="date"
                    [pickerMode]="mode"
+                   [pickerInitialView]="initialView"
                    [pickerFirstDayOfWeek]="firstDayOfWeek"
                    [pickerUseNativeOnMobile]="false">
         </div>
@@ -21,6 +22,12 @@ const exampleStandardTemplate = `
             <sui-select-option *ngFor="let m of modes.availableOptions" [value]="m"></sui-select-option>
         </sui-select>
     </div>
+    <div class="field">
+        <label>Initial View</label>
+        <sui-select class="selection" [(ngModel)]="initialView" [options]="calendarViews" labelField="label" valueField="value" #views>
+            <sui-select-option *ngFor="let m of views.availableOptions" [value]="m"></sui-select-option>
+        </sui-select>
+    </div>
     <div class="field">
         <label>First Day of the Week</label>
         <input type="number" [(ngModel)]="firstDayOfWeek" min="0" max="6">
@@ -111,6 +118,13 @@ export class DatepickerPage {
                                  "Can be from <code>0</code> (Sunday) to <code>6</code> (Saturday).",
                     defaultValue: "0"
                 },
+                {
+                    name: "pickerInitialView",
+                    type: "CalendarViewType",
+                    description: "Specifies the initial view for the datepicker. Options are: <code>CalendarViewType.Year</code>, " +
+                                 "<code>CalendarViewType.Month</code>, <code>CalendarViewType.Date</code>, " +
+                                 "<code>CalendarViewType.Hour</code> & <code>CalendarViewType.Minute</code>."
+                },
                 {
                     name: "pickerPlacement",
                     type: "PopupPlacement",
@@ -184,6 +198,15 @@ export class DatepickerExampleStandard {
     public datepickerModes:string[] = ["datetime", "date", "time", "month", "year"];
     public mode:DatepickerMode = DatepickerMode.Datetime;
     public date:Date;
+
+    public calendarViews:{ label:string; value:CalendarViewType }[] = [
+        { label: "year", value: CalendarViewType.Year },
+        { label: "month", value: CalendarViewType.Month },
+        { label: "date", value: CalendarViewType.Date },
+        { label: "hour", value: CalendarViewType.Hour },
+        { label: "minute", value: CalendarViewType.Minute }
+    ];
+    public initialView:CalendarViewType = CalendarViewType.Date;
 }
 
 @Component({

diff --git a/src/modules/datepicker/directives/datepicker.directive.ts b/src/modules/datepicker/directives/datepicker.directive.ts
@@ -12,6 +12,7 @@ import { IDatepickerLocaleValues, RecursivePartial, SuiLocalizationService } fro
 import { SuiPopupComponentController, PopupAfterOpen, PopupConfig, PopupTrigger } from "../../popup";
 import { SuiDatepicker, DatepickerMode } from "../components/datepicker";
 import { CalendarConfig, YearConfig, MonthConfig, DatetimeConfig, TimeConfig, DateConfig } from "../classes/calendar-config";
+import { CalendarViewType } from "../views/calendar-view";
 
 @Directive({
     selector: "[suiDatepicker]",
@@ -32,6 +33,19 @@ export class SuiDatepickerDirective
         this.onSelectedDateChange.emit(date);
     }
 
+    private _initialView:CalendarViewType;
+
+    @Input("pickerInitialView")
+    public get initialView():CalendarViewType {
+        return this._initialView;
+    }
+    public set initialView(view:CalendarViewType) {
+        this._initialView = view;
+        if (this.config) {
+            this.config.mappings.initialView = view;
+        }
+    }
+
     private _mode:DatepickerMode;
     public config:CalendarConfig;
 
@@ -60,6 +74,9 @@ export class SuiDatepickerDirective
                 this.config = new TimeConfig();
                 break;
         }
+        if (this._initialView != undefined) {
+            this.config.mappings.initialView = this._initialView;
+        }
         this.writeValue(this.selectedDate);
     }
 

diff --git a/src/modules/datepicker/public.ts b/src/modules/datepicker/public.ts
@@ -1,4 +1,5 @@
 export {
     SuiDatepickerModule,
-    DatepickerMode
+    DatepickerMode,
+    CalendarViewType
 } from "./index";