Date picker does not work properly in case of single datepicker and also when closing on click on button or svg icon

[abdulrehmanaxa1]

Angular: 13
Package version: 5.0.2

Description:

1. You cannot set dates start date and end date to null because by default they are set to current date, when in cases where there is no selected date required by default, it displays date. See first screen shot
   

2. It is not set for single date picker, when singleDatepicker is true it still requires and display range of start date to end date, even when linked calendar is false. And I think single date picker does not require start date and end date.
   

3. Third and most important, you can open date picker through open method of datepicker directive when clicked on button or any icon. It doesnot work like it works on input directive where you put this 'ngxDaterangepickerMd' directive in input field, it toggles when you and opens second date picker when click on second date picker but it will not trigger when using same set of events as in directive. as you clearly see in video attached.
   screen-capture (8).webm

Further here is my code:
HTML:
<input type="text"
ngxDaterangepickerMd
class="form-control"
[placeholder]="placeholder"
[showDropdowns]="showDropdowns"
[singleDatePicker]="true"
[locale]="localeConfig"
[drops]="drops"
[showDropdowns]="showDropdowns"
[showCancel]="showCancel"
[timePicker]="showTimePicker"
(datesUpdated)="singleDatesUpdated($event)"
[closeOnAutoApply]="true"
[(ngModel)]="singleSelected"
/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" (click)="openSinglePicker($event)">

Type script code of function:

openSinglePicker(event: MouseEvent) {
if (this.pickerOpen !== true) {
this.pickerDirective.open();
this.pickerOpen=true;
} else {
this.pickerOpen=false;
this.closeSinglePicker(event);
}
}

closeSinglePicker(e){
    this.pickerDirective.outsideClick(e);
    setTimeout(()=>{this.pickerDirective.open();});
}

Component where specific datepicker is called as child component:

<component [singleDatePicker]="true" [singleSelected]="selectedSingle" [pickerOpen]="pickerOneOpen">
<component [singleDatePicker]="true" [singleSelected]="selectedSingle" [pickerOpen]="pickerTwoOpen">

Clearly watch the video in third point suggest the correct solution for it.

Expected:
It should perform same sequence of functionality on click of button/icon as it is performing while clicking on input field.

[abdulrehmanaxa1]

Also see here as I may have mentioned before it still shows range in when we have set a previous date but it shows range to current date, previously I had managed it with setting end date as startdate and for patching a value we must have to add startDate attribute in formcontrol value otherwise it doesnot patch value, this works but is not a good solution. As you see in video.
screen-capture (9).webm

So need a fix of this too

[elvisnguy]

Hi @abdulrehmanaxa1, add these style for your icon
.open-datepicker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.close-datepicker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

It's worked for me.