Inline date range picker: emit an event when first date is selected

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

@@ -53,6 +53,7 @@ import { DemoDatepickerPreventChangeToNextMonthComponent } from './demos/prevent
 import { DemoDatepickerWithTimepickerComponent } from './demos/with-timepicker/with-timepicker';
 import { DatepickerCloseBehaviorComponent } from './demos/closeBehaviour/datepicker-close-behavior';
 import { KeepDatesOutOfRulesComponent } from './demos/keep-dates-out-of-rules/keep-dates-out-of-rules.component';
+import { InlineRangeBeginSelectionEventComponent } from "./demos/inline-range-begin-selection-event/inline-range-begin-selection-event";
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -478,6 +479,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/keep-dates-out-of-rules/keep-dates-out-of-rules.component.html'),
         description: `<p>If you use datepicker with rules (minDate, maxDate) you can set config property <code>keepDatesOutOfRules</code> to true to avoid overwriting invalid dates. Default value is false.</p>`,
         outlet: KeepDatesOutOfRulesComponent
+      },
+      {
+        title: "Range begin selection event in inline date range picker",
+        anchor: 'inline-range-begin-selection-event',
+        component: require('!!raw-loader!./demos/inline-range-begin-selection-event/inline-range-begin-selection-event'),
+        html: require('!!raw-loader!./demos/inline-range-begin-selection-event/inline-range-begin-selection-event.html'),
+        description: `<p>You can subscribe to the inline date range picker's begin value change event (<code>bsValueBeginChange</code>) to be notified when a user begins selecting a range.</p>`,
+        outlet: InlineRangeBeginSelectionEventComponent
       }
     ]
   },

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

@@ -45,6 +45,7 @@ import { DemoDatepickerPreventChangeToNextMonthComponent } from './prevent-chang
 import { DemoDatepickerWithTimepickerComponent } from './with-timepicker/with-timepicker';
 import { DatepickerCloseBehaviorComponent } from './closeBehaviour/datepicker-close-behavior';
 import { KeepDatesOutOfRulesComponent } from './keep-dates-out-of-rules/keep-dates-out-of-rules.component';
+import { InlineRangeBeginSelectionEventComponent } from './inline-range-begin-selection-event/inline-range-begin-selection-event';
 
 export const DEMO_COMPONENTS = [
   DemoDatePickerAdaptivePositionComponent,
@@ -91,5 +92,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerStartViewComponent,
   DemoDatepickerWithTimepickerComponent,
   DatepickerCloseBehaviorComponent,
-  KeepDatesOutOfRulesComponent
+  KeepDatesOutOfRulesComponent,
+  InlineRangeBeginSelectionEventComponent
 ];

libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.html

@@ -0,0 +1,13 @@
+<div class="row">
+  <div class="pr-3 pb-3 pe-3 w-auto">
+    <bs-daterangepicker-inline
+      (bsValueBeginChange)="valueBeginChange($event)"
+      (bsValueChange)="valueChange($event)"
+    ></bs-daterangepicker-inline>
+  </div>
+  <div class="mb-3">
+    <pre class="card card-block card-header" *ngIf="startDate">Start date is {{startDate | date}}</pre>
+    <pre class="card card-block card-header" *ngIf="endDate">End date is {{endDate | date}}</pre>
+  </div>
+</div>
+

libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-datepicker-inline',
+  templateUrl: './inline-range-begin-selection-event.html'
+})
+export class InlineRangeBeginSelectionEventComponent {
+  startDate?: Date;
+  endDate?: Date;
+
+  public valueBeginChange(event: Date[]) {
+    this.startDate = event[0];
+    this.endDate = undefined;
+  }
+
+  public valueChange(event: Date[]) {
+    this.endDate = event[1];
+  }
+}

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

@@ -6,7 +6,6 @@ import {
 import { ComponentLoader, ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 
 import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
 
 import { BsDatepickerConfig } from './bs-datepicker.config';
 import { BsDaterangepickerInlineConfig } from './bs-daterangepicker-inline.config';
@@ -77,6 +76,10 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
      * Disable specific dates
      */
     @Input() datesEnabled?: Date[];
+    /**
+     * Emits when the first range value has been received.
+     */
+    @Output() bsValueBeginChange: EventEmitter<(Date|undefined)[] | undefined> = new EventEmitter();
     /**
      * Emits when daterangepicker value has been changed
      */
@@ -198,11 +201,16 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
     if (this._datepickerRef) {
       this._subs.push(
         this._datepickerRef.instance.valueChange
-          .pipe(
-            filter((range: Date[]) => range && range[0] && !!range[1])
-          )
           .subscribe((value: Date[]) => {
-            this.bsValue = value;
+            if (value && value[0]) {
+              if (value[1]) {
+                // We have a range
+                this.bsValue = value;
+              } else {
+                // We have the first selection of a range
+                this.bsValueBeginChange.emit(value);
+              }
+            }
           })
       );
     }

src/datepicker/testing/bs-inline-daterangepicker.spec.ts

@@ -107,4 +107,19 @@ describe('daterangepicker inline:', () => {
         expect(view[1].getMinutes()).toEqual(ranges[1].value[1].getMinutes());
       });
   });
+
+  it('should emit an event when the first date in a range is selected', () => {
+    const datepicker = getDaterangepickerInlineDirective(fixture);
+    const datepickerContainerInstance = getDatepickerInlineContainer(datepicker);
+    fixture.detectChanges();
+
+    const valueBeginChangeSpy = jest.spyOn(datepicker.bsValueBeginChange, "emit");
+
+    const currentDate = new Date();
+    const range = [currentDate, undefined];
+    datepickerContainerInstance.valueChange.emit(range);
+    fixture.detectChanges();
+
+    expect(valueBeginChangeSpy).toHaveBeenCalledTimes(1);
+  });
 });