changing delimitter to '|' + changing ChangeDetectionStrategy to nav and month components

Author: vlio20

CHANGELOG.md

@@ -7,6 +7,9 @@ All notable changes to this project will be documented in this file.
 ### Bug Fixes
 - Prevent overriding of form control value from input updates ([c96f2 ](https://github.com/vlio20/angular-datepicker/commit/e4de3cb )) closes [#297](https://github.com/vlio20/angular-datepicker/issues/297) - PR by [@pklein](https://github.com/pklein)
 
+## Breaking Changes
+- Multiselect delimiter changed to `|` instead of `,`
+
 <a name="2.6.2"></a>
 # [2.6.2] (2017-11-11)
 

e2e/datpicker-e2e.spec.ts

@@ -267,14 +267,14 @@ describe('dpDayPicker dayPicker', () => {
     expect(page.selectedDays.count()).toBe(3);
     expect(page.datePickerPopup.isDisplayed()).toBe(true);
     expect(page.dayPickerInput.getAttribute('value')).toEqual(
-      `${moment().date(18).format('DD-MM-YYYY')}, ${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16)
+      `${moment().date(18).format('DD-MM-YYYY')} | ${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16)
         .format('DD-MM-YYYY')}`
     );
 
     page.clickOnDayButton('18');
     expect(page.selectedDays.count()).toBe(2);
     expect(page.dayPickerInput.getAttribute('value')).toEqual(
-      `${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16).format('DD-MM-YYYY')}`
+      `${moment().date(15).format('DD-MM-YYYY')} | ${moment().date(16).format('DD-MM-YYYY')}`
     );
   });
 

src/app/calendar-nav/calendar-nav.component.ts

@@ -1,10 +1,19 @@
-import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 
 @Component({
   selector: 'dp-calendar-nav',
   templateUrl: './calendar-nav.component.html',
   styleUrls: ['./calendar-nav.component.less'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CalendarNavComponent {
   @Input() label: string;

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

@@ -101,4 +101,18 @@ describe('Service: ObUtilsService', () => {
     expect(moment.isMoment(obj.min)).toBeTruthy();
     expect(moment.isMoment(obj.max)).toBeTruthy();
   }));
+
+  it('should test datesStringToStringArray', inject([UtilsService], (service: UtilsService) => {
+    expect(service.datesStringToStringArray('')).toEqual([]);
+    expect(service.datesStringToStringArray('14-01-1984')).toEqual(['14-01-1984']);
+    expect(service.datesStringToStringArray('14-01-1984|15-01-1984'))
+      .toEqual(['14-01-1984', '15-01-1984']);
+
+    expect(service.datesStringToStringArray(''))
+      .toEqual([]);
+    expect(service.datesStringToStringArray('14,01-1984|15,01-1984'))
+      .toEqual(['14,01-1984', '15,01-1984']);
+    expect(service.datesStringToStringArray('14,01-1984| asdasd'))
+      .toEqual(['14,01-1984', 'asdasd']);
+  }));
 });

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

@@ -1,13 +1,14 @@
 import {ECalendarValue} from '../../types/calendar-value-enum';
 import {SingleCalendarValue} from '../../types/single-calendar-value';
-import {Injectable, SimpleChange} from '@angular/core';
+import {Injectable} from '@angular/core';
 import * as moment from 'moment';
 import {Moment, unitOfTime} from 'moment';
 import {CalendarValue} from '../../types/calendar-value';
 import {IDate} from '../../models/date.model';
 import {CalendarMode} from '../../types/calendar-mode';
 import {DateValidator} from '../../types/validator.type';
 import {ICalendarInternal} from '../../models/calendar.model';
+import {forEach} from '@angular/router/src/utils/collection';
 
 export interface DateLimits {
   minDate?: SingleCalendarValue;
@@ -257,7 +258,7 @@ export class UtilsService {
   }
 
   datesStringToStringArray(value: string): string[] {
-    return (value || '').split(',').map(m => m.trim());
+    return (value || '').split('|').map(m => m.trim()).filter(Boolean);
   }
 
   getValidMomentArray(value: string, format: string): Moment[] {

src/app/common/styles/variables.less

@@ -33,6 +33,6 @@
   }
 
   &::before {
-    right: -5px;
+    right: -10px;
   }
 }

src/app/date-picker/date-picker.component.ts

@@ -43,7 +43,6 @@ import {
   ValidationErrors,
   Validator
 } from '@angular/forms';
-import * as moment from 'moment';
 import {Moment, unitOfTime} from 'moment';
 import {DateValidator} from '../common/types/validator.type';
 import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
@@ -127,7 +126,7 @@ export class DatePickerComponent implements OnChanges,
     this._selected = selected;
     this.inputElementValue = (<string[]>this.utilsService
       .convertFromMomentArray(this.componentConfig.format, selected, ECalendarValue.StringArr))
-      .join(', ');
+      .join(' | ');
     const val = this.processOnChangeCallback(selected);
     this.onChangeCallback(val, false);
     this.onChange.emit(val);

src/app/month-calendar/month-calendar.component.ts

@@ -1,5 +1,6 @@
 import {ECalendarValue} from '../common/types/calendar-value-enum';
 import {
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   EventEmitter,
   forwardRef,
@@ -35,6 +36,7 @@ import {SingleCalendarValue} from '../common/types/single-calendar-value';
   templateUrl: 'month-calendar.component.html',
   styleUrls: ['month-calendar.component.less'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     MonthCalendarService,
     {
@@ -103,8 +105,9 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     return this._currentDateView;
   }
 
-  constructor(public monthCalendarService: MonthCalendarService,
-              public utilsService: UtilsService) {
+  constructor(public readonly monthCalendarService: MonthCalendarService,
+              public readonly utilsService: UtilsService,
+              public readonly cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -152,6 +155,8 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
         .generateYear(this.componentConfig, this.currentDateView, this.selected);
       this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
     }
+
+    this.cd.markForCheck();
   }
 
   registerOnChange(fn: any): void {