Question

这是我的基础应用程序与angulajs 1.3.11＆amp; ui.bootstrap。我的Datepicker不起作用。日期日历不显示。为什么？非常感谢。

<!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属性添加到datepicker，并在需要时切换标记。

<强>标记

<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上的Datepicker ui.bootstrap

2 个答案: