wip

Author: allenhwkim

app/directive-test.component.ts

@@ -11,18 +11,6 @@ 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

src/ng2-datetime-picker.directive.ts

@@ -24,11 +24,7 @@ Number.isNaN = Number.isNaN || function(value) {
  */
 @Directive({
   selector : '[ng2-datetime-picker]',
-  providers: [Ng2Datetime],
-  host     : {
-    '(click)': 'showDatetimePicker()',
-    '(focus)': 'showDatetimePicker()'
-  }
+  providers: [Ng2Datetime]
 })
 export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   @Input('date-format')       dateFormat: string;
@@ -56,6 +52,8 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   private sub: any;
   private justShown: boolean;
 
+  inputEl: HTMLInputElement;
+
   constructor (
     private resolver:ComponentFactoryResolver,
     private viewContainerRef:ViewContainerRef,
@@ -133,8 +131,8 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     wrapper.appendChild(this.el);
 
     // add a click listener to document, so that it can hide when others clicked
-    document.body.addEventListener('click', this.hideDatetimePicker);
-    this.el.addEventListener('keyup', this.keyEventListener);
+    // document.body.addEventListener('click', this.hideDatetimePicker);
+    // this.el.addEventListener('keyup', this.keyEventListener);
     if (this.ngModel && this.ngModel.getTime) { // if it is a Date object given, set dateValue and toString method
       this.ngModel.toString = () => Ng2Datetime.formatDate(this.ngModel, this.dateFormat, this.dateOnly);
     }
@@ -148,6 +146,21 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     });
   }
 
+  ngAfterViewInit() {
+    // if this element is not an input tag, move dropdown after input tag
+    // so that it displays correctly
+    this.inputEl = this.el.tagName === "INPUT" ?
+        <HTMLInputElement>this.el : <HTMLInputElement>this.el.querySelector("input");
+
+    if (this.inputEl) {
+      this.inputEl.addEventListener('focus', this.showDatetimePicker);
+      this.inputEl.addEventListener('blur', this.hideDatetimePicker);
+      // this.inputEl.addEventListener('keydown', this.keydownEventHandler);
+      // this.inputEl.addEventListener('input', this.inputEventHandler);
+    }
+  }
+
+
   ngOnChanges(changes: SimpleChanges) {
     let date;
     if(changes && changes['ngModel']) {
@@ -183,7 +196,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
    if(this.sub) {
       this.sub.unsubscribe();
     }
-    document.body.removeEventListener('click', this.hideDatetimePicker);
+    // document.body.removeEventListener('click', this.hideDatetimePicker);
   }
 
   /* input element string value is changed */
@@ -201,7 +214,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   };
 
   //show datetimePicker element below the current element
-  showDatetimePicker(event?) {
+  showDatetimePicker = (event?): void =>  {
     if (this.componentRef) { /* if already shown, do nothing */
       return;
     }
@@ -210,7 +223,11 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
 
     this.componentRef   = this.viewContainerRef.createComponent(factory);
     this.ng2DatetimePickerEl = this.componentRef.location.nativeElement;
-    this.ng2DatetimePickerEl.addEventListener('keyup', this.keyEventListener);
+    // this.ng2DatetimePickerEl.addEventListener('keyup', this.keyEventListener);
+    // this.ng2DatetimePickerEl.addEventListener('click', function(event) {
+    //   console.log('click.................');
+    //   event.stopPropagation();
+    // });
 
     let component = this.componentRef.instance;
     component.defaultValue   = <Date>this.defaultValue || <Date>this.el['dateValue'];
@@ -234,37 +251,30 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     //Hack not to fire tab keyup event
     this.justShown = true;
     setTimeout(() => this.justShown = false, 100);
-  }
+  };
 
   dateSelected = (date) => {
     this.el.tagName === 'INPUT' && this.inputElValueChanged(date);
     this.valueChanged.emit(date);
-  }
+  };
 
-  hideDatetimePicker = (event?):void => {
-    if (this.componentRef) {
-      if (  /* invoked by clicking on somewhere in document */
-        event &&
-        event.type === 'click' &&
-        event.target !== this.el &&
-        !this.elementIn(event.target, this.ng2DatetimePickerEl)
-      ) {
-        this.componentRef.destroy();
-        this.componentRef = undefined;
-      } else if (!event) {  /* invoked by function call */
-        this.componentRef.destroy();
-        this.componentRef = undefined;
-      }
-    event && event.stopPropagation();  
+  hideDatetimePicker = (event?): any => {
+    console.log(' hide XXXXXXXXXXXXXXXXXXXXXXXXXXX', event, this.elementIn(event.target, this.ng2DatetimePickerEl))
+    if ( event && this.elementIn(event.target, this.ng2DatetimePickerEl) ) {
+      return false;
+    } else {  /* invoked by function call */
+      this.componentRef.destroy();
+      this.componentRef = undefined;
     }
+    event && event.stopPropagation();
   };
 
   private keyEventListener = (e:KeyboardEvent):void => {
-    if (e.keyCode === 27 || e.keyCode === 9 || e.keyCode === 13) { //ESC, TAB, ENTER keys
-      if (!this.justShown) {
-        this.hideDatetimePicker();
-      }
-    }
+    // if (e.keyCode === 27 || e.keyCode === 9 || e.keyCode === 13) { //ESC, TAB, ENTER keys
+    //   if (!this.justShown) {
+    //     this.hideDatetimePicker();
+    //   }
+    // }
   };
 
   private elementIn (el:Node, containerEl:Node):boolean {