feat(datepicker): enable to listen for viewchanges

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -838,6 +838,10 @@ export const ngdoc: any = {
       {
         "name": "bsValueChange",
         "description": "<p>Emits when datepicker value has been changed</p>\n"
+      },
+      {
+        "name": "bsViewChange",
+        "description": "<p>Emits when datepicker view has been changed</p>\n"
       }
     ],
     "properties": [],
@@ -971,6 +975,10 @@ export const ngdoc: any = {
         "name": "bsValueChange",
         "description": "<p>Emits when datepicker value has been changed</p>\n"
       },
+      {
+        "name": "bsViewChange",
+        "description": "<p>Emits when datepicker view has been changed</p>\n"
+      },
       {
         "name": "onHidden",
         "description": "<p>Emits an event when the datepicker is hidden</p>\n"
@@ -1390,6 +1398,10 @@ export const ngdoc: any = {
         "name": "bsValueChange",
         "description": "<p>Emits when daterangepicker value has been changed</p>\n"
       },
+      {
+        "name": "bsViewChange",
+        "description": "<p>Emits when datepicker view has been changed</p>\n"
+      },
       {
         "name": "onHidden",
         "description": "<p>Emits an event when the daterangepicker is hidden</p>\n"

libs/doc-pages/datepicker/src/lib/datepicker-section.list.ts

@@ -51,6 +51,7 @@ import { DemoDatepickerClearButtonComponent } from './demos/clear-button/clear-b
 import { DemoDatepickerStartViewComponent } from "./demos/start-view/start-view";
 import { DemoDatepickerPreventChangeToNextMonthComponent } from './demos/prevent-change-to-next-month/prevent-change-to-next-month.component';
 import { DemoDatepickerWithTimepickerComponent } from './demos/with-timepicker/with-timepicker';
+import { DemoDatepickerViewChangeEventComponent } from './demos/view-change-event/view-change-event';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -320,6 +321,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>You can subscribe to datepicker's value change event (<code>bsValueChange</code>).</p>`,
         outlet: DemoDatepickerValueChangeEventComponent
       },
+      {
+        title: 'View change event',
+        anchor: 'view-change-event',
+        component: require('!!raw-loader!./demos/view-change-event/view-change-event.ts'),
+        html: require('!!raw-loader!./demos/view-change-event/view-change-event.html'),
+        description: `<p>You can subscribe to datepicker's view change event (<code>bsViewChange</code>).</p>`,
+        outlet: DemoDatepickerViewChangeEventComponent
+      },
       {
         title: 'Config properties',
         anchor: 'config-object',
@@ -624,6 +633,11 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'value-change-event-ex',
         outlet: DemoDatepickerValueChangeEventComponent
       },
+      {
+        title: 'View change event',
+        anchor: 'view-change-event-ex',
+        outlet: DemoDatepickerViewChangeEventComponent
+      },
       {
         title: 'Config properties',
         anchor: 'config-object-ex',

libs/doc-pages/datepicker/src/lib/demos/index.ts

@@ -32,6 +32,7 @@ import { DemoDatePickerSelectWeekRangeComponent } from './select-week-range/sele
 import { DemoDatepickerTriggersCustomComponent } from './triggers-custom/triggers-custom';
 import { DemoDatepickerTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDatepickerValueChangeEventComponent } from './value-change-event/value-change-event';
+import { DemoDatepickerViewChangeEventComponent } from './view-change-event/view-change-event';
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
 import { DemoDatePickerQuickSelectRangesComponent } from './quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './daterangepicker-show-previous-month/show-previous-month';
@@ -77,6 +78,7 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerTriggersCustomComponent,
   DemoDatepickerTriggersManualComponent,
   DemoDatepickerValueChangeEventComponent,
+  DemoDatepickerViewChangeEventComponent,
   DemoDateRangePickerShowPreviousMonth,
   DemoDateRangePickerDisplayOneMonth,
   DemoDatePickerVisibilityEventsComponent,

libs/doc-pages/datepicker/src/lib/demos/view-change-event/view-change-event.html

@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
+    <div class="mb-3 card card-block card-header" *ngIf="view">
+        <div class="mb-2"><code>$event.date</code>: {{view.date | date}}</div>
+        <div><code>$event.mode</code>: {{view.mode}}</div>
+    </div>
+    <input class="form-control"
+           placeholder="Datepicker"
+           bsDatepicker
+           (bsViewChange)="onViewChange($event)">
+  </div>
+</div>

libs/doc-pages/datepicker/src/lib/demos/view-change-event/view-change-event.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BsDatepickerViewState } from 'src/datepicker/reducer/bs-datepicker.state';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-datepicker-view-change-event',
+  templateUrl: './view-change-event.html'
+})
+export class DemoDatepickerViewChangeEventComponent {
+  view?: BsDatepickerViewState;
+
+  onViewChange(view: BsDatepickerViewState): void {
+    this.view = view;
+  }
+}

src/datepicker/base/bs-datepicker-container.ts

@@ -16,6 +16,8 @@ import {
   WeekViewModel,
   YearsCalendarViewModel
 } from '../models';
+import { EventEmitter } from '@angular/core';
+import { BsDatepickerViewState } from '../reducer/bs-datepicker.state';
 
 export abstract class BsDatepickerAbstractComponent {
   containerClass = '';
@@ -37,6 +39,8 @@ export abstract class BsDatepickerAbstractComponent {
   isRangePicker?: boolean;
   withTimepicker?: boolean;
 
+  viewChange: EventEmitter<BsDatepickerViewState> = new EventEmitter<BsDatepickerViewState>();
+
   set minDate(value: Date|undefined) {
     this._effects?.setMinDate(value);
   }

src/datepicker/bs-datepicker-inline.component.ts

@@ -23,6 +23,7 @@ import { DatepickerDateCustomClasses, DatepickerDateTooltipText } from './models
 import { BsDatepickerInlineContainerComponent } from './themes/bs/bs-datepicker-inline-container.component';
 import { copyTime } from './utils/copy-time-utils';
 import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils';
+import { BsDatepickerViewState } from './reducer/bs-datepicker.state';
 
 @Directive({
   selector: 'bs-datepicker-inline',
@@ -61,6 +62,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
    * Enable specific dates
    */
   @Input() datesDisabled?: Date[];
+  /**
+   * Emits when datepicker view has been changed
+   */
+  @Output() bsViewChange: EventEmitter<BsDatepickerViewState> = new EventEmitter();
   /**
    * Emits when datepicker value has been changed
    */
@@ -96,14 +101,14 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       return;
     }
 
-     if (!this._bsValue && value && !this._config.withTimepicker) {
-       const now = new Date();
-       copyTime(value, now);
-     }
+    if (!this._bsValue && value && !this._config.withTimepicker) {
+      const now = new Date();
+      copyTime(value, now);
+    }
 
     if (value && this.bsConfig?.initCurrentTime) {
       value = setCurrentTimeOnDateSelect(value);
-     }
+    }
 
     this._bsValue = value;
     this.bsValueChange.emit(value);
@@ -130,6 +135,11 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
           this.bsValue = value;
         })
       );
+      this._subs.push(
+        this._datepickerRef.instance.viewChange.subscribe((view: BsDatepickerViewState) => {
+          this.bsViewChange.emit(view);
+        })
+      );
     }
   }
 

src/datepicker/bs-datepicker.component.ts

@@ -21,6 +21,7 @@ import { BsDatepickerViewMode, DatepickerDateCustomClasses, DatepickerDateToolti
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
 import { copyTime } from './utils/copy-time-utils';
 import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils';
+import { BsDatepickerViewState } from './reducer/bs-datepicker.state';
 
 @Directive({
   selector: '[bsDatepicker]',
@@ -92,6 +93,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
    * Date tooltip text
    */
   @Input() dateTooltipTexts?: DatepickerDateTooltipText[];
+  /**
+   * Emits when datepicker view has been changed
+   */
+  @Output() bsViewChange: EventEmitter<BsDatepickerViewState> = new EventEmitter();
   /**
    * Emits when datepicker value has been changed
    */
@@ -102,10 +107,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
   private readonly _dateInputFormat$ = new Subject<string | undefined>();
 
   constructor(public _config: BsDatepickerConfig,
-              private  _elementRef: ElementRef,
-              private  _renderer: Renderer2,
-              _viewContainerRef: ViewContainerRef,
-              cis: ComponentLoaderFactory) {
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2,
+    _viewContainerRef: ViewContainerRef,
+    cis: ComponentLoaderFactory) {
     // todo: assign only subset of fields
     Object.assign(this, this._config);
     this._datepicker = cis.createLoader<BsDatepickerContainerComponent>(
@@ -242,6 +247,11 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
           this.hide();
         })
       );
+      this._subs.push(
+        this._datepickerRef.instance.viewChange.subscribe((view: BsDatepickerViewState) => {
+          this.bsViewChange.emit(view);
+        })
+      );
     }
   }
 

src/datepicker/bs-daterangepicker-inline.component.ts

@@ -17,6 +17,7 @@ import {
   checkRangesWithMaxDate,
   setDateRangesCurrentTimeOnDateSelect
 } from './utils/bs-calendar-utils';
+import { BsDatepickerViewState } from './reducer/bs-datepicker.state';
 
 @Directive({
     selector: 'bs-daterangepicker-inline',
@@ -73,6 +74,10 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
      * Disable specific dates
      */
     @Input() datesEnabled?: Date[];
+    /**
+     * Emits when datepicker view has been changed
+     */
+    @Output() bsViewChange: EventEmitter<BsDatepickerViewState> = new EventEmitter();
     /**
      * Emits when daterangepicker value has been changed
      */
@@ -201,6 +206,11 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
             this.bsValue = value;
           })
       );
+      this._subs.push(
+        this._datepickerRef.instance.viewChange.subscribe((view: BsDatepickerViewState) => {
+          this.bsViewChange.emit(view);
+        })
+      );
     }
   }
 

src/datepicker/bs-daterangepicker.component.ts

@@ -1,4 +1,5 @@
-import { AfterViewInit, ComponentRef,
+import {
+  AfterViewInit, ComponentRef,
   Directive, ElementRef, EventEmitter,
   Input, OnChanges, OnDestroy, OnInit,
   Output, Renderer2, SimpleChanges,
@@ -16,6 +17,7 @@ import {
   checkRangesWithMaxDate,
   setDateRangesCurrentTimeOnDateSelect
 } from './utils/bs-calendar-utils';
+import { BsDatepickerViewState } from './reducer/bs-datepicker.state';
 
 @Directive({
   selector: '[bsDaterangepicker]',
@@ -64,15 +66,15 @@ export class BsDaterangepickerDirective
    */
   @Output() onHidden: EventEmitter<unknown>;
 
-  _bsValue?: (Date|undefined)[];
+  _bsValue?: (Date | undefined)[];
   isOpen$: BehaviorSubject<boolean>;
   isDestroy$ = new Subject();
 
   /**
    * Initial value of daterangepicker
    */
   @Input()
-  set bsValue(value: (Date|undefined)[] | undefined) {
+  set bsValue(value: (Date | undefined)[] | undefined) {
     if (this._bsValue === value) {
       return;
     }
@@ -118,10 +120,14 @@ export class BsDaterangepickerDirective
    * Enable specific dates
    */
   @Input() datesEnabled?: Date[];
+  /**
+  * Emits when datepicker view has been changed
+  */
+  @Output() bsViewChange: EventEmitter<BsDatepickerViewState> = new EventEmitter();
   /**
    * Emits when daterangepicker value has been changed
    */
-  @Output() bsValueChange = new EventEmitter<((Date|undefined)[]|undefined)>();
+  @Output() bsValueChange = new EventEmitter<((Date | undefined)[] | undefined)>();
 
   get rangeInputFormat$(): Observable<string> {
     return this._rangeInputFormat$;
@@ -133,10 +139,10 @@ export class BsDaterangepickerDirective
   private readonly _rangeInputFormat$ = new Subject<string>();
 
   constructor(public _config: BsDaterangepickerConfig,
-              private  _elementRef: ElementRef,
-              private  _renderer: Renderer2,
-              _viewContainerRef: ViewContainerRef,
-              cis: ComponentLoaderFactory) {
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2,
+    _viewContainerRef: ViewContainerRef,
+    cis: ComponentLoaderFactory) {
     this._datepicker = cis.createLoader<BsDaterangepickerContainerComponent>(
       _elementRef,
       _viewContainerRef,
@@ -251,6 +257,11 @@ export class BsDaterangepickerDirective
             this.hide();
           })
       );
+      this._subs.push(
+        this._datepickerRef.instance.viewChange.subscribe((view: BsDatepickerViewState) => {
+          this.bsViewChange.emit(view);
+        })
+      );
     }
   }