feat(datepicker): add startview to datepicker (#5816)

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -50,6 +50,7 @@ import { DemoDateRangePickerMaxDateRangeComponent } from './demos/max-date-range
 import { DemoDateRangePickerDisplayOneMonth } from './demos/daterangepicker-display-one-month/display-one-month';
 import { DemoDatepickerTodayButtonComponent } from './demos/today-button/today-button';
 import { DemoDatepickerClearButtonComponent } from './demos/clear-button/clear-button';
+import { DemoDatepickerStartViewComponent } from "./demos/start-view/start-view";
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -434,6 +435,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Display an optional 'Clear' button that will automatically clear date.</p>`,
         outlet: DemoDatepickerClearButtonComponent
       },
+      {
+        title: 'Start view',
+        anchor: 'start-view',
+        component: require('!!raw-loader!./demos/start-view/start-view.ts'),
+        html: require('!!raw-loader!./demos/start-view/start-view.html'),
+        description: `<p>Add <code>startView</code> property if you want to change start view</p>`,
+        outlet: DemoDatepickerStartViewComponent
+      },
       {
         title: 'Max Date Range in Daterangepicker',
         anchor: 'daterangepicker-max-date-range',

demo/src/app/components/+datepicker/demos/index.ts

@@ -41,6 +41,7 @@ import { DemoDateRangePickerMaxDateRangeComponent } from './max-date-range/max-d
 import { DemoDateRangePickerDisplayOneMonth } from './daterangepicker-display-one-month/display-one-month';
 import { DemoDatepickerTodayButtonComponent } from './today-button/today-button';
 import { DemoDatepickerClearButtonComponent } from './clear-button/clear-button';
+import { DemoDatepickerStartViewComponent } from "./start-view/start-view";
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
@@ -67,7 +68,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerMinModeComponent,
   DemoDatepickerOutsideClickComponent,
   DemoDatepickerPlacementComponent,
-  DemoDatepickerPlacementComponent,
   DemoDatepickerReactiveFormsComponent,
   DemoDatePickerReturnFocusToInputComponent,
   DemoDatePickerSelectDatesFromOtherMonthsComponent,
@@ -84,5 +84,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerClearButtonComponent,
   DemoDateRangePickerShowPreviousMonth,
   DemoDateRangePickerMaxDateRangeComponent,
-  DemoDatePickerQuickSelectRangesComponent
+  DemoDatePickerQuickSelectRangesComponent,
+  DemoDatepickerStartViewComponent
 ];

demo/src/app/components/+datepicker/demos/start-view/start-view.html

+<div class="row">
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
+    <p>The datepicker's start view is day (default)</p>
+    <input bsDatepicker
+           class="form-control"
+           placeholder="Datepicker">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
+    <p>The datepicker's start view is month</p>
+    <input [bsConfig]="{startView: 'month'}"
+           bsDatepicker
+           class="form-control"
+           placeholder="Datepicker">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
+    <p>The datepicker's start view is year</p>
+    <input [bsConfig]="{startView: 'year'}"
+           bsDatepicker
+           class="form-control"
+           placeholder="Datepicker">
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/start-view/start-view.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-start-view',
+  templateUrl: './start-view.html'
+})
+export class DemoDatepickerStartViewComponent {}

demo/src/ng-api-doc.ts

 /* tslint:disable */
+import { BsDatepickerViewMode } from "../../src/datepicker/models";
+
 export const ngdoc: any = {
   "AccordionPanelComponent": {
     "fileName": "src/accordion/accordion-group.component.ts",
@@ -1135,6 +1137,12 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Allows to hide week numbers in datepicker</p>\n"
       },
+      {
+        "name": "startView",
+        "defaultValue": "day",
+        "type": "BsDatepickerViewMode",
+        "description": "<p>Allows to change the view that the datepicker should start in</p>\n"
+      },
       {
         "name": "useUtc",
         "defaultValue": "false",

src/datepicker/bs-datepicker.config.ts

@@ -32,6 +32,10 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Default max date for all date/range pickers
    */
   maxDate?: Date;
+  /**
+   * The view that the datepicker should start in
+   */
+  startView: BsDatepickerViewMode = 'day';
   /**
    * Default date custom classes for all date/range pickers
    */

src/datepicker/bs-datepicker.spec.ts

@@ -6,7 +6,7 @@ import { BsDatepickerModule } from './bs-datepicker.module';
 import { BsDatepickerDirective } from './bs-datepicker.component';
 import { BsDatepickerConfig } from './bs-datepicker.config';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
-import { CalendarCellViewModel, WeekViewModel } from './models';
+import { BsDatepickerViewMode, CalendarCellViewModel, WeekViewModel } from './models';
 import { dispatchKeyboardEvent, queryAll } from '@netbasal/spectator';
 import { registerEscClick } from '../utils';
 
@@ -108,7 +108,9 @@ describe('datepicker:', () => {
     datepickerContainerInstance[`_store`]
       .select(state => state.view)
       .subscribe(view => {
-        expect(view.date.getDate()).not.toEqual((weekSelection.days[0].date.getDate()));
+        const currentDate = `${view.date.getDate()}${view.date.getFullYear()}` ;
+        const oldDate = `${weekSelection.days[0].date.getDate()}${weekSelection.days[0].date.getFullYear()}`;
+        expect(currentDate).not.toEqual(oldDate);
       });
   });
 
@@ -169,6 +171,56 @@ describe('datepicker:', () => {
     expect(buttonText.filter(button => button === clearBtnCustomLbl).length).toEqual(1);
   });
 
+  describe('should start with', () => {
+
+    const parameters = [
+      {
+        description: 'year view if set in config',
+        startView: 'year',
+        expectedVisibleContainer: ['bs-years-calendar-view'],
+        expectedInvisibleContainer: ['bs-month-calendar-view', 'bs-days-calendar-view'],
+        expectedViewMode: 'year'
+      },
+      {
+        description: 'month view if set in config',
+        startView: 'month',
+        expectedVisibleContainer: ['bs-month-calendar-view'],
+        expectedInvisibleContainer: ['bs-years-calendar-view', 'bs-days-calendar-view'],
+        expectedViewMode: 'month'
+      },
+      {
+        description: 'day view if set in config',
+        startView: 'day',
+        expectedVisibleContainer: ['bs-days-calendar-view'],
+        expectedInvisibleContainer: ['bs-years-calendar-view', 'bs-month-calendar-view'],
+        expectedViewMode: 'day'
+      }
+    ];
+
+    parameters.forEach(parameter => {
+      it(parameter.description, done => {
+        const datepickerDirective = getDatepickerDirective(fixture);
+        datepickerDirective.bsConfig = {
+          startView: parameter.startView as BsDatepickerViewMode
+        };
+
+        const bsDatepickerDirective = showDatepicker(fixture);
+        const datepickerContainerInstance = getDatepickerContainer(bsDatepickerDirective);
+
+        parameter.expectedVisibleContainer.forEach(container => {
+          expect(datepickerContainerInstance[`_element`].nativeElement.querySelectorAll(container)[0]).toBeTruthy();
+        });
+        parameter.expectedInvisibleContainer.forEach(container => {
+          expect(datepickerContainerInstance[`_element`].nativeElement.querySelectorAll(container)[0]).toBeFalsy();
+        });
+        datepickerContainerInstance.viewMode.subscribe(res => {
+          expect(res).toBe(parameter.expectedViewMode);
+          done();
+        });
+      });
+    });
+  });
+
   it('should set today date', () => {
     const datepicker = showDatepicker(fixture);
     const datepickerContainerInstance = getDatepickerContainer(datepicker);
@@ -200,7 +252,6 @@ describe('datepicker:', () => {
       }).unsubscribe();
   });
 
-
   it('should clear date', () => {
     const datepicker = showDatepicker(fixture);
     const datepickerContainerInstance = getDatepickerContainer(datepicker);

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -103,6 +103,8 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
         /* tslint:disable-next-line: no-any */
         .subscribe((date: any) => this.valueChange.emit(date))
     );
+
+    this._store.dispatch(this._actions.changeViewMode(this._config.startView));
   }
 
   get isTopPosition(): boolean {