Merge branch 'refactoring'

Author: allenhwkim

app/component-test.component.ts

@@ -11,6 +11,7 @@ var templateStr = `
     <fieldset><legend><h2>Attributes and Events</h2></legend>
       <ng2-utils-1>
         <ng2-datetime-picker
+          *ngIf="show !== false"
           date-format="DD-MM-YYYY hh:mm"
           [date-only]="false"
           [time-only]="false"
@@ -20,7 +21,9 @@ var templateStr = `
           [max-date]="maxDate"
           [min-hour]="9"
           [max-hour]="17"
+          [show-close-button]="true"
           [disabled-dates]="disabledDates"
+          (closing$)="show = false"
           (selected$)="selectedDate = $event">
         </ng2-datetime-picker>
         <br/> selected DateTime : {{ selectedDate || defaultValue }}

app/directive-test.component.ts

@@ -10,65 +10,51 @@ 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" />
-        <i class="fa fa-calendar"
-           ng2-datetime-picker
-           [default-value]="date1DefaultValue"
-           (valueChanged)="date1=$event"></i>
-      </ng2-utils-1>
-      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"
           [max-date]="date2MaxDate"
           date-only="true"/>
         date2: {{date2}}
       </ng2-utils-2>
-      <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>
@@ -77,7 +63,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>
@@ -92,7 +78,7 @@ var templateStr = `
       </ng2-utils-3>
       <pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
     </fieldset>
-
+    
   </div>
 `;
 
@@ -137,8 +123,4 @@ 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 ");
-  }
-
 }

ng2-datetime-picker.webtest.txt

@@ -5,16 +5,16 @@ START
   open browser
   go to http://localhost:9002
 
-TEST1
-  click "#test1 i.fa.fa-calendar"
-  set element "#test1 input.hourInput" value 11
-  verify element "#test1 input" value matches to "11:"
-  click "#test1 i.fa.fa-calendar"
-  set element "#test1 input.minutesInput" value as 19
-  verify element "#test1 input" value matches to ":19"
-  click "#test1 i.fa.fa-calendar"
-  click "#test1 div.day.selectable[title='2014-12-17']"
-  verify element "#test1 input" value matches to "2014-12-17"
+--TEST1
+--  click "#test1 i.fa.fa-calendar"
+--  set element "#test1 input.hourInput" value 11
+--  verify element "#test1 input" value matches to "11:"
+--  click "#test1 i.fa.fa-calendar"
+--  set element "#test1 input.minutesInput" value as 19
+--  verify element "#test1 input" value matches to ":19"
+--  click "#test1 i.fa.fa-calendar"
+--  click "#test1 div.day.selectable[title='2014-12-17']"
+--  verify element "#test1 input" value matches to "2014-12-17"
 
 TEST2
   click "#test2 input"