feat(datepicker): add 'dateSelect' output for date selection listening

Fixes #2181

Closes #2254

demo/src/app/components/datepicker/demos/range/datepicker-range.html

@@ -1,6 +1,6 @@
 <p>Example of the range selection</p>
 
-<ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
+<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t">
 </ngb-datepicker>
 
 <ng-template #t let-date="date" let-focused="focused">

demo/src/app/components/datepicker/demos/range/datepicker-range.ts

@@ -47,7 +47,7 @@ export class NgbdDatepickerRange {
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
   }
 
-  onDateChange(date: NgbDateStruct) {
+  onDateSelection(date: NgbDateStruct) {
     if (!this.fromDate && !this.toDate) {
       this.fromDate = date;
     } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {

src/datepicker/datepicker-input.spec.ts

@@ -608,6 +608,25 @@ describe('NgbInputDatepicker', () => {
       expect(fixture.componentInstance.onNavigate)
           .toHaveBeenCalledWith({current: {year: 2016, month: 9}, next: {year: 2018, month: 4}});
     });
+
+    it(`should relay the 'dateSelect' event`, () => {
+      const fixture = createTestCmpt(`
+          <input ngbDatepicker #d="ngbDatepicker" (dateSelect)="onDateSelect($event)">
+          <button (click)="open(d)">Open</button>`);
+
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      spyOn(fixture.componentInstance, 'onDateSelect');
+
+      // open
+      dpInput.open();
+      fixture.detectChanges();
+
+      // select
+      const dp = fixture.debugElement.query(By.css('ngb-datepicker')).injector.get(NgbDatepicker);
+      dp.select.emit({year: 2018, month: 4, day: 5});
+      fixture.detectChanges();
+      expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledWith({year: 2018, month: 4, day: 5});
+    });
   });
 
   describe('container', () => {
@@ -710,6 +729,8 @@ class TestComponent {
 
   onNavigate() {}
 
+  onDateSelect() {}
+
   open(d: NgbInputDatepicker) { d.open(); }
 
   close(d: NgbInputDatepicker) { d.close(); }

src/datepicker/datepicker-input.ts

@@ -144,6 +144,12 @@ export class NgbInputDatepicker implements OnChanges,
    */
   @Input() container: string;
 
+  /**
+   * An event fired when user selects a date using keyboard or mouse.
+   * The payload of the event is currently selected NgbDateStruct.
+   */
+  @Output() dateSelect = new EventEmitter<NgbDateStruct>();
+
   /**
    * An event fired when navigation happens and currently displayed month changes.
    * See NgbDatepickerNavigateEvent for the payload info.
@@ -324,7 +330,8 @@ export class NgbInputDatepicker implements OnChanges,
 
   private _subscribeForDatepickerOutputs(datepickerInstance: NgbDatepicker) {
     datepickerInstance.navigate.subscribe(date => this.navigate.emit(date));
-    datepickerInstance.select.subscribe(() => {
+    datepickerInstance.select.subscribe(date => {
+      this.dateSelect.emit(date);
       if (this.autoClose) {
         this.close();
       }