Primeng: Add option to hide calendar when a range is selected

[emreozyurek42]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

Expected behavior

Date range calendar needs to close after choosing two dates.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 5.X
  
  Angular version 6.1.0

• PrimeNG version: 5.X
  
  PrimeNG version 6.1.7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[picolino]

Workaround for you, @emreozyurek42

HTML:

<p-calendar [style]="{'width':'100%'}" #dateFilter
    (onSelect)="onDatesRangeFilterSelected($event)" [(ngModel)]="datesRangeFilter"
    selectionMode="range" view="month" dateFormat="mm/yy" [readonlyInput]="true"
    [showIcon]="true" [maxDate]="todayDate">
</p-calendar>

TypeScript:

import { ViewChild } from '@angular/core';

@ViewChild('dateFilter', undefined) private dateFilter: any;

public datesRangeFilter: Date[];

public onDatesRangeFilterSelected(selectedValue: Date) {        
    if (this.datesRangeFilter[1]) { // If second date is selected
        this.dateFilter.hideOverlay()
    };
}

Using
PrimeNG 8.0.0
Angular 8.0.2

_P.S. A little dirty solution, I would like this behaviour out of the box._

[Janatbek]

I would like to try to add this feature.