feat(datepicker): add emitting event when datepicker selection is done (

#733) * Emitting event when selection is done
valor-software · Jul 14, 2016 · 53c7fd1 · 53c7fd1
1 parent 2dc9ceb
commit 53c7fd1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/components/datepicker/datepicker-inner.component.ts b/components/datepicker/datepicker-inner.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, EventEmitter, Input, OnChanges} from '@angular/core';
+import {Component, OnInit, EventEmitter, Input, OnChanges, Output} from '@angular/core';
 import {CORE_DIRECTIVES, NgClass} from '@angular/common';
 import {FORM_DIRECTIVES, NgModel} from '@angular/forms';
 import {DateFormatter} from './date-formatter';
@@ -70,6 +70,8 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
   @Input() public dateDisabled:any;
   @Input() public initDate:Date;
 
+  @Output() public selectionDone: EventEmitter<Date> = new EventEmitter<Date>(undefined);
+
   public stepDay:any = {};
   public stepMonth:any = {};
   public stepYear:any = {};
@@ -248,6 +250,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
       }
 
       this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+      this.selectionDone.emit(this.activeDate);
     } else {
       this.activeDate = date;
       this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) - 1];

diff --git a/components/datepicker/datepicker.component.ts b/components/datepicker/datepicker.component.ts
@@ -1,4 +1,4 @@
-import {Component, Self, Input} from '@angular/core';
+import {Component, Self, Input, Output, EventEmitter} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {FORM_DIRECTIVES, ControlValueAccessor, NgModel} from '@angular/forms';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
@@ -32,7 +32,8 @@ import {YearPickerComponent} from './yearpicker.component';
                       [dateDisabled]="dateDisabled"
                       [templateUrl]="templateUrl"
                       [onlyCurrentMonth]="onlyCurrentMonth"
-                      [shortcutPropagation]="shortcutPropagation">
+                      [shortcutPropagation]="shortcutPropagation"
+                      (selectionDone)="onSelectionDone($event)">
       <daypicker tabindex="0"></daypicker>
       <monthpicker tabindex="0"></monthpicker>
       <yearpicker tabindex="0"></yearpicker>
@@ -64,6 +65,8 @@ export class DatePickerComponent implements ControlValueAccessor {
 // todo: change type during implementation
   @Input() public dateDisabled:any;
 
+  @Output() public selectionDone: EventEmitter<Date> = new EventEmitter<Date>(undefined);
+
   public onChange:any = Function.prototype;
   public onTouched:any = Function.prototype;
 
@@ -91,6 +94,10 @@ export class DatePickerComponent implements ControlValueAccessor {
     this.cd.viewToModelUpdate(event);
   }
 
+  public onSelectionDone(event: Date): void {
+    this.selectionDone.emit(event);
+  }
+
   // todo: support null value
   public writeValue(value:any):void {
     // todo: fix something sends here new date all the time