diff --git a/demo/src/app/components/datepicker/demos/range/datepicker-range.html b/demo/src/app/components/datepicker/demos/range/datepicker-range.html index 870521061b..900ce64c60 100644 --- a/demo/src/app/components/datepicker/demos/range/datepicker-range.html +++ b/demo/src/app/components/datepicker/demos/range/datepicker-range.html @@ -1,6 +1,6 @@

Example of the range selection

- + diff --git a/demo/src/app/components/datepicker/overview/datepicker-overview.component.html b/demo/src/app/components/datepicker/overview/datepicker-overview.component.html index 70a6b7b0ce..7bfc396432 100644 --- a/demo/src/app/components/datepicker/overview/datepicker-overview.component.html +++ b/demo/src/app/components/datepicker/overview/datepicker-overview.component.html @@ -101,7 +101,7 @@

Handling the popup

- Alternatively you could use the (dateSelect) or (select) outputs. + Alternatively you could use the (dateSelect) outputs. The difference from ngModel is that outputs will continue emitting the same value, if user clicks on the same date. NgModel will do it only once.

diff --git a/demo/src/app/components/datepicker/overview/datepicker-overview.component.ts b/demo/src/app/components/datepicker/overview/datepicker-overview.component.ts index e356b146ae..e04a2d8adc 100644 --- a/demo/src/app/components/datepicker/overview/datepicker-overview.component.ts +++ b/demo/src/app/components/datepicker/overview/datepicker-overview.component.ts @@ -45,7 +45,7 @@ export class NgbdDatepickerOverviewComponent { lang: 'html', code: ` - + diff --git a/demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts b/demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts index 0ab0f345cc..0a259de017 100644 --- a/demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts +++ b/demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts @@ -28,7 +28,7 @@ import {NgbCalendar, NgbDate, NgbDateNativeAdapter} from '@ng-bootstrap/ng-boots
this.navigate.emit(navigateEvent)); - datepickerInstance.select.subscribe(date => { + datepickerInstance.dateSelect.subscribe(date => { this.dateSelect.emit(date); if (this.autoClose === true || this.autoClose === 'inside') { this.close(); diff --git a/src/datepicker/datepicker-service.spec.ts b/src/datepicker/datepicker-service.spec.ts index 9d498ed9f6..767a5b8848 100644 --- a/src/datepicker/datepicker-service.spec.ts +++ b/src/datepicker/datepicker-service.spec.ts @@ -48,7 +48,7 @@ describe('ngb-datepicker-service', () => { // subscribing subscriptions.push( service.model$.subscribe(mock.onNext), service.model$.subscribe(m => model = m), - service.select$.subscribe(mockSelect.onNext), service.select$.subscribe(d => selectDate = d)); + service.dateSelect$.subscribe(mockSelect.onNext), service.dateSelect$.subscribe(d => selectDate = d)); }); afterEach(() => { subscriptions.forEach(s => s.unsubscribe()); }); diff --git a/src/datepicker/datepicker-service.ts b/src/datepicker/datepicker-service.ts index 379ce91ee1..7769f10e04 100644 --- a/src/datepicker/datepicker-service.ts +++ b/src/datepicker/datepicker-service.ts @@ -25,7 +25,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n'; export class NgbDatepickerService { private _model$ = new Subject(); - private _select$ = new Subject(); + private _dateSelect$ = new Subject(); private _state: DatepickerViewModel = { disabled: false, @@ -43,7 +43,10 @@ export class NgbDatepickerService { get model$(): Observable { return this._model$.pipe(filter(model => model.months.length > 0)); } - get select$(): Observable { return this._select$.pipe(filter(date => date !== null)); } + get dateSelect$(): Observable { return this._dateSelect$.pipe(filter(date => date !== null)); } + + /** @deprecated please use `dateSelect$` */ + get select$(): Observable { return this.dateSelect$; } set dayTemplateData(dayTemplateData: NgbDayTemplateData) { if (this._state.dayTemplateData !== dayTemplateData) { @@ -138,7 +141,7 @@ export class NgbDatepickerService { } if (options.emitEvent && isDateSelectable(selectedDate, this._state)) { - this._select$.next(selectedDate); + this._dateSelect$.next(selectedDate); } } } diff --git a/src/datepicker/datepicker.spec.ts b/src/datepicker/datepicker.spec.ts index b34f0ea585..e91053809f 100644 --- a/src/datepicker/datepicker.spec.ts +++ b/src/datepicker/datepicker.spec.ts @@ -611,22 +611,22 @@ describe('ngb-datepicker', () => { }); it('should emit select event when select date', () => { - const fixture = - createTestComponent(``); + const fixture = createTestComponent( + ``); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); let dates = getDates(fixture.nativeElement); dates[11].click(); fixture.detectChanges(); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(1); + expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(1); }); it('should emit select event twice when select same date twice', () => { - const fixture = - createTestComponent(``); + const fixture = createTestComponent( + ``); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); let dates = getDates(fixture.nativeElement); dates[11].click(); @@ -635,15 +635,15 @@ describe('ngb-datepicker', () => { dates[11].click(); fixture.detectChanges(); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2); + expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2); }); it('should emit select event twice when press enter key twice', () => { - const fixture = - createTestComponent(``); + const fixture = createTestComponent( + ``); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); focusDay(); fixture.detectChanges(); @@ -653,15 +653,15 @@ describe('ngb-datepicker', () => { triggerKeyDown(getMonthContainer(datepicker), 13 /* enter */); fixture.detectChanges(); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2); + expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2); }); it('should emit select event twice when press space key twice', () => { - const fixture = - createTestComponent(``); + const fixture = createTestComponent( + ``); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); focusDay(); fixture.detectChanges(); @@ -671,7 +671,7 @@ describe('ngb-datepicker', () => { triggerKeyDown(getMonthContainer(datepicker), 32 /* space */); fixture.detectChanges(); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2); + expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2); }); it('should insert an embedded view for footer when `footerTemplate` provided', () => { @@ -1286,7 +1286,7 @@ class TestComponent { dayTemplateData = () => '!'; markDisabled = (date: NgbDateStruct) => { return NgbDate.from(date).equals(new NgbDate(2016, 8, 22)); }; onNavigate = () => {}; - onSelect = () => {}; + onDateSelect = () => {}; getDate = () => ({year: 2016, month: 8}); onPreventableNavigate = (event: NgbDatepickerNavigateEvent) => event.preventDefault(); } diff --git a/src/datepicker/datepicker.ts b/src/datepicker/datepicker.ts index bb6549912c..8480822773 100644 --- a/src/datepicker/datepicker.ts +++ b/src/datepicker/datepicker.ts @@ -273,7 +273,16 @@ export class NgbDatepicker implements OnDestroy, * * The payload of the event is currently selected `NgbDate`. */ - @Output() select = new EventEmitter(); + @Output() dateSelect = new EventEmitter(); + + /** + * An event emitted when user selects a date using keyboard or mouse. + * + * The payload of the event is currently selected `NgbDate`. + * + * @deprecated please use 'dateSelect' event + */ + @Output() select = this.dateSelect; onChange = (_: any) => {}; onTouched = () => {}; @@ -287,7 +296,7 @@ export class NgbDatepicker implements OnDestroy, 'maxDate', 'navigation', 'outsideDays', 'showWeekdays', 'showWeekNumbers', 'startDate'] .forEach(input => this[input] = config[input]); - _service.select$.pipe(takeUntil(this._destroyed$)).subscribe(date => { this.select.emit(date); }); + _service.dateSelect$.pipe(takeUntil(this._destroyed$)).subscribe(date => { this.dateSelect.emit(date); }); _service.model$.pipe(takeUntil(this._destroyed$)).subscribe(model => { const newDate = model.firstDate;