fixing 359

Author: vlio20

CHANGELOG.md

@@ -1,13 +1,15 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-<a name="2.7.4"></a>
-# [2.7.4] (???)
+<a name="2.7.5"></a>
+# [2.7.5] (???)
 ### Bug Fixes
-- Fixing disabled dates when selecting past/future time from current day  ([18db1ca](https://github.com/vlio20/angular-datepicker/commit/18db1ca)) closes [#340](https://github.com/vlio20/angular-datepicker/issues/340)
+- Fixing `inputElementContainer` which did not work on directive + added to docs ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#359](https://github.com/vlio20/angular-datepicker/issues/359)
+- Fixing Not able to bind to moment, getting TypeError: `(value || "").split is not a function` ([19cee2d](https://github.com/vlio20/angular-datepicker/commit/19cee2d)) closes [#355](https://github.com/vlio20/angular-datepicker/issues/355)
 
-<a name="2.7.3"></a>
-# [2.7.3] (2018-01-13)
+<a name="2.7.4"></a>
+# [2.7.4] (2018-01-13)
+- Fixing disabled dates when selecting past/future time from current day  ([18db1ca](https://github.com/vlio20/angular-datepicker/commit/18db1ca)) closes [#340](https://github.com/vlio20/angular-datepicker/issues/340)
 
 ### Features
 - Navigation events are now dispatched from all relevant components ([2552889](https://github.com/vlio20/angular-datepicker/commit/2552889)) closes [#329](https://github.com/vlio20/angular-datepicker/issues/329)

README.md

@@ -122,6 +122,7 @@ Here are the available configurations:
 | multipleYearsNavigateBy     | `number`              | `10`                                                                      | `day\|month\|daytime`     | Number of years to navigate when showMultipleYearsNavigation is `true`                                                                                                                                                                                                        |
 | returnedValueType           | `ECalendarValue`      | `Moment`                                                                  | All                       | The returned value type (`Moment`, `Moment[]`, `string`, `string[]`                                                                                                                                                                                                           |
 | unSelectOnClick             | `boolean`             | true                                                                      | `day\|month`              | Will allow disallow/unselect to selected date by clicking on the selected date                                                                                                                                                                                                |
+| inputElementContainer       | `string\|HTMLElement` | `undefined`                                                               | ALL                       | Will place picker popup relative to the provided elemenr (if string provided will used as a selector)                                                                                                                                                                         |
 
 ### API:
 In order to use the date-picker api user the `@ViewChild` annotation in the date-picker containing component class, take at the example below:  

build-helpers/index-maker.js

@@ -328,4 +328,14 @@ export class UtilsService {
 
     return false;
   }
+
+  getNativeElement(elem: HTMLElement | string): HTMLElement {
+    if (!elem) {
+      return null;
+    } else if (typeof elem === 'string') {
+      return <HTMLElement>document.querySelector(elem);
+    } else {
+      return elem;
+    }
+  }
 }

build-helpers/inliner.js

@@ -11,7 +11,7 @@ export interface IConfig {
   onOpenDelay?: number;
   disableKeypress?: boolean;
   appendTo?: string | HTMLElement;
-  inputElementContainer?: HTMLElement;
+  inputElementContainer?: HTMLElement | string;
   drops?: TDrops;
   opens?: TOpens;
   hideInputContainer?: boolean;

src/app/common/services/utils/utils.service.ts

@@ -23,10 +23,18 @@ export class DatePickerDirectiveService {
     const _config: IDatePickerDirectiveConfig = {...config};
     _config.hideInputContainer = true;
 
-    if (baseElement) {
+    let native;
+
+    if (config.inputElementContainer) {
+      native = this.utilsService.getNativeElement(config.inputElementContainer);
+    } else {
+      native = baseElement ? baseElement.nativeElement : null;
+    }
+
+    if (native) {
       _config.inputElementContainer = attachTo
-        ? this.convertToHTMLElement(attachTo, baseElement.nativeElement)
-        : baseElement.nativeElement;
+        ? this.convertToHTMLElement(attachTo, native)
+        : native;
     }
 
     return _config;

src/app/date-picker/date-picker-config.model.ts

@@ -335,7 +335,7 @@ export class DatePickerComponent implements OnChanges,
   }
 
   setInputElementContainer() {
-    this.inputElementContainer = this.componentConfig.inputElementContainer
+    this.inputElementContainer = this.utilsService.getNativeElement(this.componentConfig.inputElementContainer)
       || this.elemRef.nativeElement.querySelector('.dp-input-container')
       || document.body;
   }