Angular UI Bootstrap datepicker in modal only working on first click

Question

The date picker seems to be only working on the first click and then after that it won't pop up. I am guessing it has something to do with some crossed variable or function definitions, but I can't figure out how to fix it.

Here is the code: http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview

HTML

<div ng-controller="ModalDemoCtrl">
    <button class="btn btn-info" ng-click="open_modal()">Edit</button>

    <script type="text/ng-template" id="notificationInput.html">
        <div class="modal-header">
            <h3 class="modal-title">My Modal</h3>
        </div>
        <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="n_title">Title</label>
                    <input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
                </div>

                <div class="form-group">
                    <label for="n_release">Release</label>
                    <p class="input-group">
                        <input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </p>
                </div>
            </form>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
</div>

Javascript

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open_modal = function(notification) {

        $scope.selectedNotification = notification;
        var modalInstance = $modal.open({
            templateUrl: 'notificationInput.html',
            controller: ModalInstanceCtrl,
            scope: $scope
        });
    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function () {
        $scope.dt = null;
    };

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
    };

    $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.initDate = new Date('2016-15-20');
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];

};

i don't see where you are adding your controllers to your angular module — Delta
– Delta, Commented Jul 8, 2014 at 20:54

Jay Shukla · Accepted Answer · 2014-07-08 21:11:09Z

7

As you are using it inside modal there is scope issue. You just need to use $parent.opened instead opened.

Modified HTML

<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

Working DEMO

answered Jul 8, 2014 at 21:11

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeeva J Over a year ago

This is working greatly. Previously I had lagging. Now there is no lagging

Jeeva J Over a year ago

When I click on button, there is no issue. When I click on input box, The date picker is not opening and I am getting the following issue in console. "Cannot read property '$$nextSibling' of null"

Sincere · Accepted Answer · 2015-04-08 16:43:21Z

0

This has worked for me:

In html replace is-open="opened" by is-open="field.opened"

and the same in the controller, replace

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened = true;
};

by

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.field.opened = true;
};

answered Apr 8, 2015 at 16:43

Sincere

4775 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap datepicker in modal only working on first click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related