Next (#360)

* fixing #340 (#341) * updating change log * fixing changelog * testing new build (#351) * version bump * fixing issue #355 (#356) * resolving conflict * fixing 359 * Adding documentation for * fixing changelog * fixing build
vlio20 · Mar 5, 2018 · 9b65ba5 · 9b65ba5
1 parent f8eb6e8
commit 9b65ba5
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 135 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,16 @@
 # 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)
+- Adding documentation for `showGoToCurrent` ([b3e3728](https://github.com/vlio20/angular-datepicker/commit/b3e3728)) closes [#357](https://github.com/vlio20/angular-datepicker/issues/357)
+- Fixing `inputElementContainer` which did not work on directive + added to docs ([6344b38](https://github.com/vlio20/angular-datepicker/commit/6344b38)) 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)

diff --git a/README.md b/README.md
@@ -121,7 +121,9 @@ Here are the available configurations:
 | showMultipleYearsNavigation | `boolean`             | `false`                                                                   | `day\|month\|daytime`     | If set to `true` will show buttons to navigate by multiple years (10 by default)                                                                                                                                                                                              |
 | 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                                                                                                                                                                                                |
+| 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)                                                                                                                                                                         |
+| showGoToCurrent             | `boolean`             | `true`                                                                    | ALL                       | Show/Hides the go to current button on the calendars navigation                                                                                                                                                                         |
 
 ### 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:  

diff --git a/build-helpers/inliner.js b/build-helpers/inliner.js
diff --git a/src/app/common/services/utils/utils.service.spec.ts b/src/app/common/services/utils/utils.service.spec.ts
@@ -2,6 +2,7 @@ import {inject, TestBed} from '@angular/core/testing';
 import {UtilsService} from './utils.service';
 import * as momentNs from 'moment';
 import {IDate} from '../../models/date.model';
+
 const moment = momentNs;
 
 describe('Service: ObUtilsService', () => {
@@ -116,4 +117,16 @@ describe('Service: ObUtilsService', () => {
     expect(service.datesStringToStringArray('14,01-1984| asdasd'))
       .toEqual(['14,01-1984', 'asdasd']);
   }));
+
+  it('check convertToString', inject([UtilsService], (service: UtilsService) => {
+    const format = 'MM/DD/YYYY';
+    expect(service.convertToString(null, format)).toEqual('');
+    expect(service.convertToString('', format)).toEqual('');
+    expect(service.convertToString(moment(), format)).toEqual(moment().format(format));
+    expect(service.convertToString([moment()], format)).toEqual(moment().format(format));
+    expect(service.convertToString([moment(), moment().add(1, 'd')], format))
+      .toEqual(moment().format(format) + ' | ' + moment().add(1, 'd').format(format));
+    expect(service.convertToString([moment().format(format), moment().add(1, 'd').format(format)], format))
+      .toEqual(moment().format(format) + ' | ' + moment().add(1, 'd').format(format));
+  }));
 });
diff --git a/src/app/common/services/utils/utils.service.ts b/src/app/common/services/utils/utils.service.ts
@@ -8,6 +8,7 @@ import {IDate} from '../../models/date.model';
 import {CalendarMode} from '../../types/calendar-mode';
 import {DateValidator} from '../../types/validator.type';
 import {ICalendarInternal} from '../../models/calendar.model';
+
 const moment = momentNs;
 
 export interface DateLimits {
@@ -127,6 +128,28 @@ export class UtilsService {
     }
   }
 
+  convertToString(value: CalendarValue, format: string): string {
+    let tmpVal: string[];
+
+    if (typeof value === 'string') {
+      tmpVal = [value];
+    } else if (Array.isArray(value)) {
+      if (value.length) {
+        tmpVal = (<SingleCalendarValue[]>value).map((v) => {
+          return this.convertToMoment(v, format).format(format);
+        });
+      } else {
+        tmpVal = <string[]>value;
+      }
+    } else if (moment.isMoment(value)) {
+      tmpVal = [value.format(format)];
+    } else {
+      return '';
+    }
+
+    return tmpVal.filter(Boolean).join(' | ');
+  }
+
   // todo:: add unit test
   clearUndefined<T>(obj: T): T {
     if (!obj) {
@@ -305,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;
+    }
+  }
 }
diff --git a/src/app/date-picker/date-picker-config.model.ts b/src/app/date-picker/date-picker-config.model.ts
@@ -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;

diff --git a/src/app/date-picker/date-picker-directive.service.ts b/src/app/date-picker/date-picker-directive.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;

diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.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;
   }

diff --git a/src/app/date-picker/date-picker.directive.spec.ts b/src/app/date-picker/date-picker.directive.spec.ts
@@ -17,7 +17,7 @@ describe('Directive: DpDayPicker', () => {
     });
   });
 
-  const directive = new DatePickerDirective(null, null, null, null, null);
+  const directive = new DatePickerDirective(null, null, null, null, null, null);
 
   it('should create an instance', () => {
     expect(directive).toBeTruthy();

diff --git a/src/app/date-picker/date-picker.directive.ts b/src/app/date-picker/date-picker.directive.ts
@@ -19,6 +19,8 @@ import {NgControl} from '@angular/forms';
 import {CalendarValue} from '../common/types/calendar-value';
 import {SingleCalendarValue} from '../common/types/single-calendar-value';
 import {INavEvent} from '../common/models/navigation-event.model';
+import {UtilsService} from '../common/services/utils/utils.service';
+import {ECalendarValue} from '../common/types/calendar-value-enum';
 
 @Directive({
   exportAs: 'dpDayPicker',
@@ -164,7 +166,8 @@ export class DatePickerDirective implements OnInit {
               public elemRef: ElementRef,
               public componentFactoryResolver: ComponentFactoryResolver,
               public service: DatePickerDirectiveService,
-              @Optional() public formControl: NgControl) {
+              @Optional() public formControl: NgControl,
+              public utilsService: UtilsService) {
   }
 
   ngOnInit(): void {
@@ -189,7 +192,8 @@ export class DatePickerDirective implements OnInit {
 
     this.formControl.valueChanges.subscribe((value) => {
       if (value !== this.datePicker.inputElementValue) {
-        this.datePicker.onViewDateChange(value);
+        const strVal = this.utilsService.convertToString(value, this.datePicker.componentConfig.format);
+        this.datePicker.onViewDateChange(strVal);
       }
     });
 

diff --git a/src/app/day-time-calendar/day-time-calendar.service.spec.ts b/src/app/day-time-calendar/day-time-calendar.service.spec.ts
@@ -5,6 +5,7 @@ import {UtilsService} from '../common/services/utils/utils.service';
 import {DayCalendarService} from '../day-calendar/day-calendar.service';
 import {TimeSelectService} from '../time-select/time-select.service';
 import {IDayCalendarConfigInternal} from '../day-calendar/day-calendar-config.model';
+
 const moment = momentNs;
 
 const DAY_FORMAT = 'YYYYMMDD';

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,9 +17,6 @@
       "dom"
     ]
   },
-  "include": [
-    "prebuild/app/index.ts"
-  ],
   "exclude": [
     "node_modules",
     "**/*.spec.ts"