Angular UI Datepicker无法正常运行

时间:2013-07-19 16:00:00

标签: angularjs angularjs-directive angular-ui angular-ui-bootstrap

Javascript控制台中没有错误,所有资源似乎都在加载,但点击输入文本字段时不会弹出datepicker。

app.js

 var app = angular.module('appform', ['ngSanitize','ui.bootstrap', 'leaflet-directive']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/', {templateUrl: 'partials/landmark-list.html', controller: LandmarkListCtrl}). 
}]);

HTML

    <div class="control-group input-append">
      <input type="text" ng-model="landmark.time.start" data-date-format="dd/mm/yyyy" bs-datepicker>
      <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
    </div>

index.html资源

  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-datepicker.css">
  <link href="css/flat-ui.css" rel="stylesheet">

  <script src="lib/jquery/jquery-1.10.1.min.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-sanitize.min.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="lib/angular/ui-bootstrap-0.3.0.min.js"></script>
  <script src="lib/angular-leaflet-directive.js"></script>
  <script src="lib/bootstrap-datepicker.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>

1 个答案:

答案 0 :(得分:0)

虽然这是一个老问题,但我认为这可能在将来有所帮助。我发现flat-ui CSS和angular ui的datepicker彼此表现不佳。我遇到了同样的问题,通过反复试验发现从我的导入中删除flat-ui.css使得日期选择器出现了。

对我有用的解决方案是添加以下自定义css。

ul.dropdown-menu {
    visibility: visible;
    opacity: 1;
}