angular ui bootstrap datepicker is-open directive not working

Question

i'm trying to use angularjs ui bootstrap datepicker on my project but same code i grabbed from example doesn't seems to be working properly when i dig in to code i have realized the problem is with is-open attribute.sample code i tried to run on my project was.

<section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Datepicker</strong></div>
        <div class="panel-body" data-ng-controller="DatepickerDemoCtrl">
            <div class="row">
                <div class="col-sm-4">
                    <div class="input-group ui-datepicker">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" 
                               class="form-control"
                               datepicker-popup="{{format}}"
                               ng-model="dt"
                               is-open="opened"
                               min="minDate"
                               max="'2015-06-22'"
                               datepicker-options="dateOptions" 
                               date-disabled="disabled(date, mode)"
                               ng-required="true" 
                               close-text="Close">
                    </div>
                    <div class="callout callout-info">
                        <p>Date is: {{dt | date:'fullDate'}}</p>
                    </div>
                </div>

                <div class="col-sm-8">
                    <p>
                        Format:
                        <span class="ui-select">
                            <select ng-model="format"
                                    ng-options="f for f in formats"></select>
                        </span>
                    </p>

                    <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </div>
            </div>
        </div>
    </section>


.controller('DatepickerDemoCtrl', [
    '$scope', function($scope) {
      $scope.today = function() {
        return $scope.dt = new Date();
      };
      $scope.today();
      $scope.showWeeks = true;
      $scope.toggleWeeks = function() {
        return $scope.showWeeks = !$scope.showWeeks;
      };
      $scope.clear = function() {
        return $scope.dt = null;
      };
      $scope.disabled = function(date, mode) {
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      };
      $scope.toggleMin = function() {
        var _ref;
        return $scope.minDate = (_ref = $scope.minDate) != null ? _ref : {
          "null": new Date()
        };
      };
      $scope.toggleMin();
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        return $scope.opened = true;
      };
      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };
      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      return $scope.format = $scope.formats[0];
    }
  ])

updated

here is the demo plunker i have tried to assigning $parent.opened as well still not working

ryeballar · Accepted Answer · 2014-09-30 14:02:25Z

1

The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.

FORKED PLUNKER

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

Notice the ng-click event I added in the datepicker input, when you click the input element, it will open the datepicker. Likewise for the font-awesome calendar button on the right side of the input element, I have added an ng-click as well to open the calendar when it is clicked:

<span class="input-group-addon" ng-click="open($event)">
  <i class="fa fa-calendar"></i>
</span>

Furthermore, you were adding the bootstrap.js script in the plunker. Since you're already UI-Bootstrap, then it would be redundant to use bootstrap.js which depends on JQuery.

answered Sep 30, 2014 at 14:02

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

1 Comment

Gayan Over a year ago

thanks for the reply ryeballar. it worked after that work around. that folked plunker worked and popup was bit strange than expected but i just copied the exact code was on example code. what would be the cause it to work without using ng-click="open($event)" i have removed bootstrap.js and tried. still i can't find what is wrong same code when it comes to my project. thanks

Collectives™ on Stack Overflow

angular ui bootstrap datepicker is-open directive not working

updated

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

updated

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related