hideOnOutsideClick added

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+<a name="2.8.0"></a>
+# [2.8.0] (???)
+### Features
+- Show/Hide the picker popup after click outside of the component `hideOnOutsideClick` ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#362](https://github.com/vlio20/angular-datepicker/issues/362)
+
 <a name="2.7.5"></a>
 # [2.7.5] (2018-03-05)
 ### Bug Fixes

README.md

@@ -122,8 +122,9 @@ 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)                                                                                                                                                                         |
-| showGoToCurrent             | `boolean`             | `true`                                                                    | ALL                       | Show/Hides the go to current button on the calendars navigation                                                                                                                                                                         |
+| 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                                                                                                                                                                                                               |
+| hideOnOutsideClick          | `boolean`             | `true`                                                                    | All                       | Show/Hides the picker popup after click outside of the component                                                                                                                                                                                                              |
 
 ### 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:  

e2e/app.po.ts

@@ -118,6 +118,9 @@ export class DemoPage {
   showInputRadio = $('#showInputRadio');
   hideInputRadio = $('#hideInputRadio');
 
+  showOnOutsideClick = $('#showOnOutsideClick');
+  hideOnOutsideClick = $('#hideOnOutsideClick');
+
   hourUpBtn = $(`${this.popupSelector} .dp-time-select-control-hours > .dp-time-select-control-up`);
   hourDownBtn = $(`${this.popupSelector} .dp-time-select-control-hours > .dp-time-select-control-down`);
   hourDisplay = $(`${this.popupSelector} .dp-time-select-display-hours`);

e2e/datpicker-e2e.spec.ts

@@ -20,6 +20,11 @@ describe('dpDayPicker dayPicker', () => {
     expect(page.datePickerPopup.isDisplayed()).toBe(true);
     page.clickOnBody();
     expect(page.datePickerPopup.isDisplayed()).toBe(false);
+
+    page.showOnOutsideClick.click();
+    page.dayPickerInput.click();
+    page.clickOnBody();
+    expect(page.datePickerPopup.isDisplayed()).toBe(true);
   });
 
   it('should check that the theme is added and removed', () => {

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

@@ -15,6 +15,7 @@ export interface IConfig {
   drops?: TDrops;
   opens?: TOpens;
   hideInputContainer?: boolean;
+  hideOnOutsideClick?: boolean;
 }
 
 export interface IDatePickerConfig extends IConfig,

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

@@ -18,7 +18,9 @@ import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config
 import {IDpDayPickerApi} from './date-picker.api';
 import {DatePickerService} from './date-picker.service';
 import {
-  AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -216,11 +218,13 @@ export class DatePickerComponent implements OnChanges,
   }
 
   onBodyClick() {
-    if (!this.hideStateHelper && this.areCalendarsShown) {
-      this.hideCalendar();
-    }
+    if (this.componentConfig.hideOnOutsideClick) {
+      if (!this.hideStateHelper && this.areCalendarsShown) {
+        this.hideCalendar();
+      }
 
-    this.hideStateHelper = false;
+      this.hideStateHelper = false;
+    }
   }
 
   @HostListener('window:resize')

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

@@ -25,7 +25,8 @@ export class DatePickerService {
     showWeekNumbers: false,
     enableMonthSelector: true,
     showGoToCurrent: true,
-    locale: moment.locale()
+    locale: moment.locale(),
+    hideOnOutsideClick: true
   };
 
   constructor(private utilsService: UtilsService,

src/app/demo/demo/demo.component.html

@@ -1062,6 +1062,30 @@ <h3 class="dp-options-section">Config options</h3>
         </div>
       </div>
 
+      <div class="dp-option" *ngIf="isValidConfig('hideOnOutsideClick')">
+        <span class="dp-option-header">
+          Hide on outside click (hideOnOutsideClick):
+        </span>
+        <div class="dp-option-playground">
+          <label>Enabled
+            <input id="hideOnOutsideClick"
+                   type="radio"
+                   [(ngModel)]="config.hideOnOutsideClick"
+                   name="hideOnOutsideClick"
+                   [value]="true"
+                   (ngModelChange)="configChanged('hideOnOutsideClick', 'true')">
+          </label>
+          <label>Disabled
+            <input id="showOnOutsideClick"
+                   type="radio"
+                   [(ngModel)]="config.hideOnOutsideClick"
+                   name="hideOnOutsideClick"
+                   [value]="false"
+                   (ngModelChange)="configChanged('hideOnOutsideClick', 'false')">
+          </label>
+        </div>
+      </div>
+
       <div class="dp-option" *ngIf="isValidConfig('unSelectOnClick')">
         <span class="dp-option-header">
           Allow un select selected date (unSelectOnClick):

src/app/demo/demo/demo.component.ts

@@ -31,7 +31,8 @@ const PICKER_OPTION_KEYS = [
   'opens',
   'placeholder',
   'required',
-  'hideInputContainer'
+  'hideInputContainer',
+  'hideOnOutsideClick'
 ];
 const DAY_PICKER_DIRECTIVE_OPTION_KEYS = [
   'allowMultiSelect',
@@ -220,7 +221,8 @@ export class DemoComponent {
     locale: moment.locale(),
     hideInputContainer: false,
     returnedValueType: ECalendarValue.String,
-    unSelectOnClick: true
+    unSelectOnClick: true,
+    hideOnOutsideClick: true
   };
   isAtTop: boolean = true;