Angular UI Datepicker无法正常工作

问题描述：

Javascript控制台中没有错误，所有资源似乎都在加载，但点击输入文本字段时不弹出日期选择器。Angular UI 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>

如果没有使用http://plnkr.co/（或类似的）的现场复制场景，它将几乎不可能在这一个帮助你。 –

是不是日期选择器应该是一个元素，而不是属性？ – rGil

我想你已经混合了2个库：https：//github.com/angular-ui/bootstrap和AngularStrap - 这两个库完全不同，但都有datepicker。你打算使用哪一个？ –

答

尽管这是一个老问题，但我认为这可能会帮助一些在未来。我发现flat-ui CSS和angular ui的日期选择器在对方表现不佳。我遇到了同样的问题，并通过反复试验发现，从我的导入中删除flat-ui.css使datepicker出现。

为我工作的解决方案是添加以下自定义CSS。

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

Angular UI Datepicker无法正常工作

相关推荐