diff --git a/libs/doc-pages/datepicker/src/lib/datepicker-section.list.ts b/libs/doc-pages/datepicker/src/lib/datepicker-section.list.ts
index 8544ebeb82..0e90868134 100644
--- a/libs/doc-pages/datepicker/src/lib/datepicker-section.list.ts
+++ b/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: `
If you use datepicker with rules (minDate, maxDate) you can set config property keepDatesOutOfRules
to true to avoid overwriting invalid dates. Default value is false.
`,
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: `You can subscribe to the inline date range picker's begin value change event (bsValueBeginChange
) to be notified when a user begins selecting a range.
`,
+ outlet: InlineRangeBeginSelectionEventComponent
}
]
},
diff --git a/libs/doc-pages/datepicker/src/lib/demos/index.ts b/libs/doc-pages/datepicker/src/lib/demos/index.ts
index 7d7932d522..e970ec240e 100644
--- a/libs/doc-pages/datepicker/src/lib/demos/index.ts
+++ b/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
];
diff --git a/libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.html b/libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.html
new file mode 100644
index 0000000000..dd0dd13e36
--- /dev/null
+++ b/libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.html
@@ -0,0 +1,13 @@
+
+
diff --git a/libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.ts b/libs/doc-pages/datepicker/src/lib/demos/inline-range-begin-selection-event/inline-range-begin-selection-event.ts
new file mode 100644
index 0000000000..af398b4b33
--- /dev/null
+++ b/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];
+ }
+}
diff --git a/src/datepicker/bs-daterangepicker-inline.component.ts b/src/datepicker/bs-daterangepicker-inline.component.ts
index 0d1e0fd341..f763196171 100644
--- a/src/datepicker/bs-daterangepicker-inline.component.ts
+++ b/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);
+ }
+ }
})
);
}
diff --git a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts
index 1a9651a946..d7514889a5 100644
--- a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts
+++ b/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);
+ });
});