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.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 1a21f310a4..212175904a 100644 --- a/src/datepicker/datepicker-service.spec.ts +++ b/src/datepicker/datepicker-service.spec.ts @@ -45,7 +45,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 88b0665bfe..e3df75a908 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) { @@ -142,7 +145,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 cde4bba145..9b129931b4 100644 --- a/src/datepicker/datepicker.spec.ts +++ b/src/datepicker/datepicker.spec.ts @@ -610,21 +610,21 @@ describe('ngb-datepicker', () => { it('should emit select event when select date', () => { const fixture = - createTestComponent(``); + 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(``); + createTestComponent(``); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); let dates = getDates(fixture.nativeElement); dates[11].click(); @@ -633,15 +633,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(``); + createTestComponent(``); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); focusDay(); fixture.detectChanges(); @@ -651,15 +651,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(``); + createTestComponent(``); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'onDateSelect'); focusDay(); fixture.detectChanges(); @@ -669,7 +669,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', () => { @@ -1211,7 +1211,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 a17e65854f..5d176747cd 100644 --- a/src/datepicker/datepicker.ts +++ b/src/datepicker/datepicker.ts @@ -240,7 +240,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 = () => {}; @@ -254,7 +263,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;