Question 273081 in ASP.NET Question posted in
The official documentation can be found here.

Asp.Net 4.8, Angular JS 2.0 datetimepicker issue in modal browser

I’m currently working with ASP.NET 4.8 and AngularJS 2.0 in my application, where I’ve successfully integrated a datetime picker. It’s been working flawlessly across various parts of my application. However, I’ve encountered an issue specifically when using the datetime picker within a modal browser containing four tabs. Strangely, the datetime picker functions correctly in one tab, while in the other tabs, the calendar opens and closes simultaneously. These tabs load partial views. Notably, when I use the same code outside of the modal browser, it functions as expected.

Here’s a snippet of the code in question:

<input name="StartDate" id="StartDate" type="text" class="form-control" datepicker-popup="{{format}}" ng-model="Admin.FilterBeginDate" is-open="filterbegindate" ng-mousedown="filterbegindate=true" min-date="minDate" close-text="Close" />
<button type="button" class="btn btn-default" ng-click="Admin.Methods.Open($event,'filterbegindate')><i class="glyphicon glyphicon-calendar"></i></button>

Angular Code:

Open: function($event, target){
    $event.preventDefault();
    $event.stopPropagation();
    
    if(target == 'filterbegindate')
    {
        $scope.filterbegindate = true;
    }
}

Could you assist me in understanding why it exhibits this specific behavior exclusively within the modal browser?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I want to clarify that the problem wasn't with Angular, it was actually with the CSS. The calendar was opening and setting a height to the div, leading to the issue. After playing around with the CSS, I was able to resolve the problem. Sometimes, even the smallest things can take up much of your time. Anyway, keep coding, and have a great day!


  2. 0

    I would add $scope.$watch to that variable and see if it gets flipped back immediately, or perhaps set to null/undefined. Then trace where it’s possible for "filterbegindate=false". The datepicker probably has a global "page-clicked" handler so if you click off the picker it hides it. If I were to guess it’d be wrapped in a $timeout with a very short delay, causing it to show briefly.

    The $event.stop/prevent isn’t preventing the "datepicker clicked outside" event from triggering. This is mostly guess work since I’m not entirely sure what you’re using for datepicker/modal/scope architecture.

    Also, if Admin.Methods is a global service or similar then it’s likely not operating on the same scope as the modal, so you have 2 "filterbegindate" parameters. e.g. $scope.filterbegindate (input box) + $scope.$parent.filterbegindate (button) or perhaps $rootScope.filterbegindate

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search