Question

我正在为我的项目使用bootstrap datepicker，该项目在使用打字稿的angularjs中。

我有两个输入字段来选择“开始日期”和“结束日期”。我正在做的是，当用户选择开始日期时，焦点从“开始日期”字段切换到“结束日期”字段，并且日期选择器日历结束日期弹出窗口，直到目前为止一切正常，但问题是除非选择任何日期，否则结束日期日历弹出窗口不会关闭。

<div class="form-group row m-b-0">
    <label class="col-xs-3 col-sm-3 control-label p-t-5">Select Date</label>
    <div class="col-xs-9 col-md-9">
        <div class="row">
            <div class=" col-xs-6 col-md-6">
                <div class="input-control text full-size" style="margin-top:-2px;">
                    <input date-range-picker id="selectStartDate"
                           class="form-control date-picker text-center qc-datepicker ng-pristine ng-valid ng-isolate-scope ng-not-empty ng-touched"
                           type="button"
                           ng-model="coverCntrl.daterangepickerStart.date"
                           options="{autoclose: true, linkedCalendars: false,format: 'YYYY-MM-DD',singleDatePicker:true,showDropdowns:true,Esc:true,icons:{date: 'glyphicon glyphicon-calendar'}}"
                           aria-invalid="false" style="">
                    <span class="fa fa-calendar" style="position: absolute; top: 13px; left: 10px;"></span>
                </div>
            </div>
            <div class="col-xs-6 col-md-6">
                   <div class="input-control text full-size" style="margin-top:-2px;">
                        <input date-range-picker id="selectEndDate"
                               class="form-control date-picker text-center qc-datepicker ng-pristine ng-valid ng-isolate-scope ng-not-empty ng-touched"
                               type="button" ng-blur="coverCntrl.hideFocus()"
                               ng-model="coverCntrl.daterangepickerEnd.date" 
                               options="{autoclose: true, linkedCalendars: false,format: 'YYYY-MM-DD',singleDatePicker:true,Esc:true,showDropdowns:true}" 
                               aria-invalid="false" style=""
                               min="coverCntrl.daterangepickerStart.date">
                            <span class="fa fa-calendar" style="position: absolute; top: 13px; left: 10px;"></span>
                    </div>
                </div>

        </div>
    </div>

</div>

`
// angularjs控制器代码。

 hideFocus() {
    var endDate = window.document.getElementById("selectEndDate");    

    endDate.blur();


}



setFocus() {
    var endDate = window.document.getElementById("selectEndDate");
    endDate.focus();
    this.daterangepickerEnd.date = this.daterangepickerStart.date;


}



private setUpWatches($scope: ng.IScope) {
    $scope.$watch(() => this.daterangepickerStart.date, (v) => {
        if (this.firstTimeWatch) {
            this.firstTimeWatch = false
        } else {
            if (v) {
                this.setFocus();
            }

        }

    });
}

`

从第一个日期选择器中选择日期后，Bootstrap日期选择器日历弹出窗口是否无法关闭？

0 个答案: