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

在我的angular项目中，我面临JQuery daterangepicker的问题。第一次选择date和daterangepicker时，请靠近。然后我再次按下日期选择器字段，它会波动。立即打开并关闭daterangepicker，我无法选择日期。有时它甚至无法打开日期选择器。有时它会打开多个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>

预订日期
请选择有效的预订日期
不可能超过30晚。

日期选择器

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';

        }

    }
}

onDestinationFocusOut（）{
if（isPlatformBrowser（this.platformId））{
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'；
}否则{
console.log（this.uparrrow，“else”）
//document.getElementById（“hideshowdatepicker”）.style.display='block'；
this.uparrrow=true；
}
}
}
uparrrow:boolean=false；
uparrowImg（）{
//console.log（“插入箭头更改”+此.uparrrow）；
if（isPlatformBrowser（this.platformId））{
让checkindate=（document.getElementById（“HotelsJP\u HP\u WS\u Search\u CheckIn\u Out”）；
//让iddatepicker=（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（）；
}否则{
$（'.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'；
}
}
}

请检查此链接->为什么有2个

=“datesrangespick”>

。您的代码中也包含它吗？谢谢，但已经尝试过了，没有success@Shizukura不，它不包括在我的代码中。我在这里是我的错，我重新爱上了。