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;