Merge pull request #128 from SDV-Plurimedia/master

ADD directive output to know when the component close

Author: allenhwkim

README.md

@@ -38,7 +38,7 @@ AngularJS 2 DateTime Picker
         import { BrowserModule  } from '@angular/platform-browser';
         import { AppComponent } from './app.component';
         import { Ng2DatetimePickerModule } from 'ng2-datetime-picker';
-        
+
         @NgModule({
           imports: [BrowserModule, FormsModule, Ng2DatetimePickerModule],
           declarations: [AppComponent],
@@ -48,22 +48,22 @@ AngularJS 2 DateTime Picker
 
 ## Use it in your code
 
-        
+
        <input
           [(ngModel)]="myDate"
-          ng2-datetime-picker 
+          ng2-datetime-picker
           date-only="true" />
 
        <form [formGroup]="myForm">
-         <input 
+         <input
            required
-           [(ngModel)]='myVar' 
-           formControlName="date" 
+           [(ngModel)]='myVar'
+           formControlName="date"
            ng2-datetime-picker
             date-only="true"/>
        </form>
-       
-       <input 
+
+       <input
           [(ngModel)]="date2" ng2-datetime-picker
           date-format="DD-MM-YYYY hh:mm"
           year="2014"
@@ -72,53 +72,53 @@ AngularJS 2 DateTime Picker
           hour="23"
           minute='59'
           close-on-select="false"  />
-          
+
 For full example, please check `test` directory to see the example of;
 
   - `app.module.ts`
   -  and `app.component.ts`.
 
 ## Override default style
 
-The default style is written in `src/ng2-datetime-picker.component.ts`. 
+The default style is written in `src/ng2-datetime-picker.component.ts`.
 This can be overwritten by giving a more detailed css selector.
- 
-e.g., 
+
+e.g.,
 
     #my-div .ng2-datetime-picker {
       background-color: blue;
     }
-    
+
 ## Override built-in date parser and date formatter
 
 The default date parser and formatter can only handle 'YYYY-MM-DD HH:MM' format
-if you are not using [momentjs](http://momentjs.com/). If you use momentjs, you 
+if you are not using [momentjs](http://momentjs.com/). If you use momentjs, you
 can use momentjs dateformat by adding the following in your html.
 
     <script src="moment-with-locales.min.js"></script>
-    
+
 If you are using moment and want to pass in a string date value in one format but display it in a different format
 you can use both date-format and parse-format:
-    
-    <input 
-          [(ngModel)]="date" 
+
+    <input
+          [(ngModel)]="date"
           ng2-datetime-picker
           date-format="MM/DD/YYYY HH:mm"
           parse-format="YYYY-MM-DD HH:mm:ss" />
 
-If you want to have your own date format without using momentjs, 
+If you want to have your own date format without using momentjs,
 please override `Ng2DateTime.parser` and `Ng2DateTime.formatDate` function.
-For example, 
+For example,
 
     import { Ng2DatetimePickerModule, Ng2Datetime } from 'ng2-datetime-picker';
 
     // Override Date object formatter
-    Ng2Datetime.formatDate = (date: Date) : string => { 
-        ..... my own function that returns a string .... 
+    Ng2Datetime.formatDate = (date: Date) : string => {
+        ..... my own function that returns a string ....
     };
 
     // Override Date object parser
-    Ng2Datetime.parseDate = (str: any): Date => { 
+    Ng2Datetime.parseDate = (str: any): Date => {
         .... my own function that returns a date ...
     } ;
 
@@ -131,7 +131,7 @@ For example,
 
 In addition, you can override other static variables of `Ng2Datetime` class. The following
 is the list of variables that you can override.
-  
+
   * **days**:            default: 1,2,....31           
   * **daysOfWeek**:      default: Sunday, Monday, .....
   * **weekends**:        default: 0,6
@@ -144,7 +144,7 @@ is the list of variables that you can override.
 
 This module is only improved and maintained by contributors like you;
 
-As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 
+As a contributor, it's NOT required to be skilled in Javascript nor Angular2.
 It’s required to be open-minded and interested in helping others.
 You can contribute to the following;
 
@@ -158,13 +158,13 @@ In result of your active contribution, you will be listed as a core contributor
 on https://ng2-ui.github.io, and a member of ng2-ui too.
 
 If you are interested in becoming a contributor and/or a member of ng-ui,
-please send me email to `allenhwkim AT gmail.com` with your github id. 
+please send me email to `allenhwkim AT gmail.com` with your github id.
 
-## attributes
+## Attributes
   All options are optional except value
 
   * **date-only**,  true or false, default is false
-  * **time-only**, true or false, default is false 
+  * **time-only**, true or false, default is false
   * **close-on-select**, true or false. indicates to close ng2-datetime-picker when select a date. default: true
   * **date-format**,  momentjs date format, e.g. YYYY-MM-DD hh:mm:ss.
     You need to include `moment` js in your html to use date-format.
@@ -179,7 +179,18 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
   * **min-hour** number, mininum selectable hour
   * **max-hour** number, maximum selectable hour
   * **disabled-dates**  Array of Date, dates not selectable
-     
+
+## Outputs of directive
+
+  * **ngModelChange**, triggered when the input value as changed (contains new input value)
+  * **valueChanged**, triggered when a date modification is done (contains new date value)
+  * **popupClosed**, triggered when the component is closed (contains a boolean true)
+
+## Outputs of component
+
+  * **selected$**, triggered when a date modification is done (contains new date value)
+  * **closing$**, triggered when the component is closed (contains a boolean true)
+
 ## For Developers
 
 ### To start
@@ -188,7 +199,7 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
     $ cd ng2-datetime-picker
     $ npm install
     $ npm start
- 
+
 ### List of available npm tasks
 
   * `npm run` : List all available tasks

app/directive-test.component.ts

@@ -10,7 +10,7 @@ moment['locale']('en-ca'); //e.g. fr-ca
 var templateStr = `
   <div id="my-div">
     <h1>Ng2 DateTime Picker Test</h1>
-    
+
     <fieldset id="test1"><legend><h2>Open from a button</h2></legend>
       <ng2-utils-1>
         <input [(ngModel)]="date1" />
@@ -22,11 +22,11 @@ var templateStr = `
       date1: {{date1}}
       <pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
     </fieldset>
-    
+
     <fieldset id="test2"><legend><h2>min date, max date, disabled dates</h2></legend>
       <ng2-utils-2>
         <input
-          [(ngModel)]="date2" 
+          [(ngModel)]="date2"
           ng2-datetime-picker
           [disabled-dates]="date2DisabledDates"
           [min-date]="date2MinDate"
@@ -37,37 +37,38 @@ var templateStr = `
       <a href="javascript:void(0)" (click)="myDate=defaultValue">set myDate</a><br/>
       <pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
     </fieldset>
-     
+
     <fieldset id="test3"><legend><h2>time only</h2></legend>
       <ng2-utils-4>
         <input [(ngModel)]="date3"
-          ng2-datetime-picker 
+          ng2-datetime-picker
           date-format="DD-MM-YYYY hh:mm"
           time-only="true"
           minute-step="5"
+          (popupClosed)="doOnClose($event)"
           close-on-select="false" />
       </ng2-utils-4>
       <pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
     </fieldset>
-   
+
     <fieldset id="test4"><legend><h2>with timezone</h2></legend>
       <ng2-utils-6>
-        <input 
-          [(ngModel)]="date4" 
+        <input
+          [(ngModel)]="date4"
           ng2-datetime-picker
           [date-format]="date4TimezoneFormat" />
           dateWithTimezone: {{dateWithTimezone}}
         <br/>
       </ng2-utils-6>
       <pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
     </fieldset>
-   
+
     <fieldset id="test5"><legend><h2>Reactive form</h2></legend>
       <ng2-utils-3>
         <form [formGroup]="myForm">
-            <input 
+            <input
               required
-              formControlName="date" 
+              formControlName="date"
               ng2-datetime-picker
               close-on-select="false"/>
         </form>
@@ -76,7 +77,7 @@ var templateStr = `
         <br/>myForm.dirty: {{myForm.dirty}}
         <br/>myForm.controls.date.dirty: {{myForm.controls.date.dirty}}
         <br/>
-        <a href="javascript:void()" 
+        <a href="javascript:void()"
           (click)="myForm.controls.date.patchValue('2015-06-30')">
           2015-06-30
         </a>
@@ -91,7 +92,7 @@ var templateStr = `
       </ng2-utils-3>
       <pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
     </fieldset>
-    
+
   </div>
 `;
 
@@ -136,4 +137,8 @@ export class DirectiveTestComponent {
     //moment.tz.setDefault('US/Central'); // Set the default timezone that moment will use
   }
 
+  private doOnClose(event:boolean){
+    alert(" Do something on close ");
+  }
+
 }

src/ng2-datetime-picker.directive.ts

@@ -48,6 +48,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   @Input('ngModel')        ngModel: any;
   @Output('ngModelChange') ngModelChange = new EventEmitter();
   @Output('valueChanged')  valueChanged  = new EventEmitter();
+  @Output('popupClosed')  popupClosed  = new EventEmitter();
 
   private el: HTMLInputElement;                               /* input element */
   private ng2DatetimePickerEl: HTMLElement;                      /* dropdown element */
@@ -233,7 +234,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     component.closing$.subscribe(() => {
       this.closeOnSelect !== "false" && this.hideDatetimePicker();
     });
-    
+
     //Hack not to fire tab keyup event
     this.justShown = true;
     setTimeout(() => this.justShown = false, 100);
@@ -246,19 +247,21 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
 
   hideDatetimePicker = (event?):void => {
     if (this.componentRef) {
-      if (  /* invoked by clicking on somewhere in document */
-        event &&
+      if (
+        /* invoked by clicking on somewhere in document */
+        (event &&
         event.type === 'click' &&
         event.target !== this.el &&
-        !this.elementIn(event.target, this.ng2DatetimePickerEl)
+        !this.elementIn(event.target, this.ng2DatetimePickerEl))
+        || 
+        /* invoked by function call */
+        !event
       ) {
         this.componentRef.destroy();
         this.componentRef = undefined;
-      } else if (!event) {  /* invoked by function call */
-        this.componentRef.destroy();
-        this.componentRef = undefined;
+        this.popupClosed.emit(true);
       }
-    event && event.stopPropagation();  
+      event && event.stopPropagation();
     }
   };