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 @@ +
+
+ +
+
+
Start date is {{startDate | date}}
+
End date is {{endDate | date}}
+
+
+ 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); + }); });