From 54296accfd170541fc14dfe6daf19223c2dfd66b Mon Sep 17 00:00:00 2001 From: Vlad Ioffe Date: Tue, 6 Mar 2018 13:41:23 +0200 Subject: [PATCH] hideOnOutsideClick added --- CHANGELOG.md | 5 ++++ README.md | 5 ++-- e2e/app.po.ts | 3 +++ e2e/datpicker-e2e.spec.ts | 5 ++++ .../date-picker/date-picker-config.model.ts | 1 + src/app/date-picker/date-picker.component.ts | 14 +++++++---- src/app/date-picker/date-picker.service.ts | 3 ++- src/app/demo/demo/demo.component.html | 24 +++++++++++++++++++ src/app/demo/demo/demo.component.ts | 6 +++-- 9 files changed, 56 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 802a548c..23228620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ # Changelog All notable changes to this project will be documented in this file. + +# [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) + # [2.7.5] (2018-03-05) ### Bug Fixes diff --git a/README.md b/README.md index 94362245..e4aba3e7 100644 --- a/README.md +++ b/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: diff --git a/e2e/app.po.ts b/e2e/app.po.ts index 5c3f58ef..2b87eea5 100644 --- a/e2e/app.po.ts +++ b/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`); diff --git a/e2e/datpicker-e2e.spec.ts b/e2e/datpicker-e2e.spec.ts index acd7c447..fcbce906 100644 --- a/e2e/datpicker-e2e.spec.ts +++ b/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', () => { diff --git a/src/app/date-picker/date-picker-config.model.ts b/src/app/date-picker/date-picker-config.model.ts index 542ae0de..5da67fc8 100644 --- a/src/app/date-picker/date-picker-config.model.ts +++ b/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, diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.ts index 6ee852d8..cffd6fe0 100644 --- a/src/app/date-picker/date-picker.component.ts +++ b/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') diff --git a/src/app/date-picker/date-picker.service.ts b/src/app/date-picker/date-picker.service.ts index 54a17f38..3618591b 100644 --- a/src/app/date-picker/date-picker.service.ts +++ b/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, diff --git a/src/app/demo/demo/demo.component.html b/src/app/demo/demo/demo.component.html index c1ec5f58..484f0511 100644 --- a/src/app/demo/demo/demo.component.html +++ b/src/app/demo/demo/demo.component.html @@ -1062,6 +1062,30 @@

Config options

+
+ + Hide on outside click (hideOnOutsideClick): + +
+ + +
+
+
Allow un select selected date (unSelectOnClick): diff --git a/src/app/demo/demo/demo.component.ts b/src/app/demo/demo/demo.component.ts index b865bbf9..a3b1fa32 100644 --- a/src/app/demo/demo/demo.component.ts +++ b/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;