jQuery datepicker在第一次选择日期后关闭

Question

我在我的角度项目中遇到JQuery daterangepicker的问题。 我第一次选择日期，并且daterangepicker接近。 然后我再次按日期选择器字段上它会波动。 立即打开和关闭daterangepicker，我无法选择日期。有时它甚至没有打开日期选择器。有时它打开了1个以上的daterangepicker。

预期行为：

我第一次打开daterangepicker并选择日期，它应该在选择日期后关闭。再次，我可以打开daterangepicker，并且可以根据需要更改日期

datepicker.html

<li class="jp-calender-search col-xs-12 col-md-3 col-sm-4">
<div class="form-group daterange-group">
    <label for="checkin-out" class="form-label jp-desktop-label">Booking Dates</label>

    <span (click)="uparrowImg();dropdownhideshow()" (focusout)="onDestinationFocusOut()" class="abcd" id="datesrangespick">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        <input name="datefilter" required type="text" id="HotelsJP_HP_WS_Search_CheckIn_Out" class="form-control jp-home-input jp-search-cal"
            placeholder="Check-in - Check-out"  aria-label="checkin-out" readonly="readonly" aria-describedby="checkin-out" >
        <span class="datesac"></span>            

        <span class="jp-homecalendericon downarrowcal"></span>            
    </span>

    <span class="cm-icon icon-caldr jp-homepage-icon"></span>
    <span id="searchdateval" style="display: none">
        <label class="error" for="place" style="display: block;">Please select valid booking dates</label>
    </span>
    <span id="searchdatevalres" style="display: none">
        <label class="error" for="place" style="display: block;">No of nights more than 30 are not possible.</label>
    </span>

</div>

datepicker.ts

onDestinationFocusOut() {
    if (isPlatformBrowser(this.platformId)) {
        console.log("in focus out--->", this.uparrrow);
        if (this.uparrrow == true) {
           // this.uparrrow = false;
            console.log('hide show')
            console.log(this.uparrrow)
            //  document.getElementById("hideshowdatepicker").style.display = 'none';


        } else {
            console.log(this.uparrrow,"else")

            //  document.getElementById("hideshowdatepicker").style.display = 'block';
            this.uparrrow = true;

        }

    }


}

uparrrow: boolean = false;
uparrowImg() {
    // console.log("in arrow change" + this.uparrrow);
    if (isPlatformBrowser(this.platformId)) {
        let checkindate = <HTMLInputElement>(document.getElementById("HotelsJP_HP_WS_Search_CheckIn_Out"));
        // let iddatepicker= <HTMLInputElement>(document.getElementById("hideshowdatepicker"));
        if (this.uparrrow == true) {
            // this.uparrrow = false;
            console.log('hide show')
            $('.jp-homecalendericon').removeClass('uparrowcal');
            $('.jp-homecalendericon').addClass('downarrowcal');
            document.getElementById("hideshowdatepicker").style.display = 'none';
            document.getElementById("dropbigdiv12").style.display = 'none';


            checkindate.blur();
        } else {
            $('.jp-homecalendericon').removeClass('downarrowcal');
            $('.jp-homecalendericon').addClass('uparrowcal');
            checkindate.focus();
            document.getElementById("hideshowdatepicker").style.display = 'block';
            this.uparrrow = true;
        }
    }


}


dropdownhideshow() {
    if (isPlatformBrowser(this.platformId)) {
        if (this.uparrrow == true) {
            document.getElementById("dropbigdiv12").style.display = 'none';

        }

    }
}