angularjs 1.3.11 上的日期选择器 ui.bootstrap

Question

这是我使用 angulajs 1.3.11 和 ui.bootstrap 的基础应用程序。我的日期选择器不起作用。日期日历不显示。为什么？非常感谢。

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.0" src="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>DATE TEST</h1>
    <div class="col-md-2">
       <input type="text" class="form-control" data-ng-model="mydata" id="mydata" name="mydata" datepicker-popup="dd-MM-yyyy" />
    </div>
  </body>

</html>

还有我的 Js：

var myApp = angular.module('app', ['ui.bootstrap']);

这是我在 http://plnkr.co/edit/dmM3NiWPF30wXM4PiiPc?p=preview

上的基本代码

Answer 1

我们需要进行以下更改。

Bootstrap 需要 jQuery
将 is-open 属性添加到日期选择器并在需要时切换标志。

标记

<input type="text" class="form-control" data-ng-model="mydata" id="mydata" 
name="mydata" datepicker-popup="dd-MM-yyyy" is-open="opened" ng-click="opened = !opened"/>

这是Updated plnkr

Answer 2

Bootstrap不需要JQuery。 OP 缺少控制器和 is-open 变量。 Working example.

在HTML中：

is-open="opened"

在 JS 中：

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

angularjs 1.3.11 上的日期选择器 ui.bootstrap

Datepicker ui.bootstrap on angularjs 1.3.11

angularjs

angular-ui-bootstrap