CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Gericke
Gericke

Reputation: 2241

UI Datepicker not opening

I am very new with UI Bootstrap for AngularJS. I am trying to use the datepicker but it does not open.

Here is a plunker

Scripts:

<script src="../Scripts/ui-bootstrap-tpls-0.10.0.min.js"></script>
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                    "~/Scripts/angular.js",
                    "~/Script/angular-route.js"));

bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
                    "~/Content/bootrap.css",
                    "~/Content/bootstrap-datetimepicker.min.css"));

Upvotes: 0

Views: 1139

Answers (2)

RonnBlack
RonnBlack

Reputation: 4098

@xyclos provided a great answer that was very insightful but when it is used with a repeated template it causes ALL the datepicker's on the page to open at the same time.

This is because it is tying all the datepicker's to the single scope variable "open".

This made me realize that the samples page for UI Bootstrap has exactly the same problem. I was able to fix this problem with highlighted changes below (Which I believe is even more straightforward anyway).

<div ng-repeat="surgery in surgeries">
    <label>SurgeryDate</label>
    <p class="input-group">
        <input type="text" 

             is-open="surgery.open"
               class="form-control" 
               uib-datepicker-popup="yyyy-MM-dd" 
               ng-model="surgery.SurgeryDate" 
        />
        <span class="input-group-btn">
            <button type="button" 

                ng-click="surgery.open = true"
                    class="btn btn-default">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </p>
</div>

Upvotes: 0

Jake Johnson
Jake Johnson

Reputation: 1864

inject $timeout into your controller.

change open() to: 

 $scope.open = function () {

  $timeout(function() {
    $scope.opened = true;  
  });

};

and change data-is-open to:

data-is-open="opened"

see it working here

Upvotes: 2

Related Questions