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