Search code examples
angularjsdatetimepickerangular-bootstrap

angular-bootstrap-datetimepicker not auto close on Date selection


I am using https://github.com/dalelotts/angular-bootstrap-datetimepicker datepicker. it is not auto closing the datepicker control..

<div class="dropdown-toggle my-toggle-select" id="dLabel1" role="button" data-toggle="dropdown" >
<div class="input-append">
    <i class="fa fa-calendar input-icon input-icon-highlight"></i>
    <label id="lblCheckOut" ng-repeat="(key, value) in vm.homelabel | objectByKeyValFilter:'LblId':'lblCheckOut'">{{value.TextMessage}}</label>
    <input type="text" id="txtCheckOutDate" class="form-control" data-ng-model="CheckOutDate.date | date:'MMM d, EEE' " />
</div>
</div>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel1">
<datetimepicker data-ng-model="CheckOutDate.date" ng-click="$event.stopPropagation()" data-before-render="vm.beforeRender_CheckOutDate($view, $dates, $leftDate, $upDate, $rightDate,1);" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select' ,startView:'day', minView:'day'}"></datetimepicker>
</ul>

I could not find any property to auto close the angular bootstrap datepicker...


Solution

  • I have fixed by wrapping bootstrap class to given HTML..

    <div class="dropdown">
    <div class="dropdown-toggle my-toggle-select" id="dLabel1" role="button" data-toggle="dropdown" >
    <div class="input-append">
        <i class="fa fa-calendar input-icon input-icon-highlight"></i>
        <label id="lblCheckOut" ng-repeat="(key, value) in vm.homelabel | objectByKeyValFilter:'LblId':'lblCheckOut'">{{value.TextMessage}}</label>
        <input type="text" id="txtCheckOutDate" class="form-control" data-ng-model="CheckOutDate.date | date:'MMM d, EEE' " />
    </div>
    </div>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel1">
    <datetimepicker data-ng-model="CheckOutDate.date" ng-click="$event.stopPropagation()" data-before-render="vm.beforeRender_CheckOutDate($view, $dates, $leftDate, $upDate, $rightDate,1);" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select' ,startView:'day', minView:'day'}"></datetimepicker>
    </ul>
    </div>
    

    It's working correctly..

    Thank you @Dale for your review and updates.