Dismiss angularstrap calendar when typing and show up when click input

Question

I'm having trouble to dismiss the calendar when typing date by hand and popup when its clicked again. Are there any other way I tried below that I can dismiss the calendar?

<input type="text" ng-model="datePicker.date" class="form-control" placeholder="Date" bs-datepicker data-bs-show="datePicker.show">

I have my directive that blur the element, but i keep losing the focus on the input

element.bind("keydown keypress", function (event) {
    scope.$apply(function (){
    element[0].blur();
    });
});

I tried to destroy the element element.remove(), but i have click twice to show up the calendar.

Answer 1

I hated to do this, but it works... In your input, you need 2 functions, one is ng-blur and ng-click. So I set as false my default scope `data-bs-show="datePicker.show"``and then add validation on those 2 functions mentioned.

$scope.calendarShow = false;

$scope.clickCalendar = function(){
    if($scope.calendarShow){
        $scope.calendarShow = false
    } else{
        $scope.calendarShow =true
    }
}

$scope.blurCalendar = function(){
    $scope.calendarShow = false;
}

Edit: forgot to mention, use the keypress function and set scope to false