Angular UI日期选择器不工作

我已按照此处所述的步骤Getting Angular UI to work和这里的How to integrate AngularUI to AngularJS?，但无法使datepicker弹出。Angular UI日期选择器不工作

请注意，在接受的答案中的两篇文章中的小提琴都不起作用。

有什么建议吗？这个小工具是否在angular-ui的最新版本上工作？

更新：我的资源进口

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/directives.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script> 
<script src="/assets/module.js?body=1" type="text/javascript"></script> 
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script>

的模块声明：

angular.module('project', ['ngResource', 'ui.directives']);

标签：

<input type="text" ng-model="date" ui-date/>

来源

2013-04-23 Tomas Romero

他们缺少（在两个JS和CSS 404）外部引用。所以这可能是由于缺少参考。这是一个working example。

请记住，AngularUI主要包装jQueryUI插件。所以你需要在AngularUI之前使用jQueryUI，而在jQueryUI之前需要使用jQuery。和AngularUI之前的Angular本身。只要确保你有以下CSSS：

jQueryUI的（http://jqueryui.com/）
AngularUI（http://angular-ui.github.io/）
您的应用程序

而且按以下顺序这些JS文件：

jQuery，所以你可以安全地加载jQuery UI插件S（Datapicker）
jQueryUI的，所以你AngualrUI可以利用它的插件（日期选择器）
角，所以AngularUI有机会获得角框架
AngualrUI
你的模块声明，参考ui.directives模块。

来源

2013-04-23 14:45:39

我已经更新了我的问题与我的参考，或许我在那里搞乱的东西。 – 2013-04-23 16:58:42

我在应用程序中复制/粘贴了你的工作示例，但它很失败，我必须有一些配置错误。 – 2013-04-23 17:04:17

您是否检查过网络标签以查看是否加载了所有依赖关系？你没有得到404吗？为什么你有'jquery-ui.js？body = 1'和'jquery-ui-1.10.2.custom.min.js？body = 1'？ – 2013-04-23 17:16:17

作为一种变通方法，直到我得到的角度UI在我的项目工作，我做了如下指令，工作原理：

project.directive('datepicker', function() { 

    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     date: '=' 
    }, 
    link: function(scope, element, attrs) { 
     element.datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function(dateText, datepicker) { 
      scope.date = dateText; 
      scope.$apply(); 
     } 
     }); 
    }, 
    template: '<input type="text" class="span2" ng-model="date"/>', 
    replace: true 
    } 

});

，并在html：

<td><datepicker date="myDomainObj.startDate"></datepicker></td> 
<td><datepicker date="myDomainObj.endDate"></datepicker></td>

来源

2013-04-23 17:06:54

包括以下JS为了

jquery.js
jquery-ui.js
angular-min。JS

我在HTML代码

<body ng-app="myApp" ng-controller="myController"> 
// some other html code 
<input type="text" ng-model="date" mydatepicker /> 
<br/> 
{{ date }} 
//some other html code 
</body>

在JS

增加了以下

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

，请确保您的代码指令第一，之后添加对控制器的代码，否则它会导致问题。

日期选择器指令：从上面的答案称为

var app = angular.module('myApp',[]); 
app.directive('mydatepicker', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
     element.datepicker({ 
      dateFormat: 'DD, d MM, yy', 
      onSelect: function (date) { 
       scope.date = date; 
       scope.$apply(); 
      } 
     }); 
    } 
    }; 
});

指令代码。

这个指令后，写控制器

app.controller('myController',function($scope){ 
//controller code 
};

来源

2015-11-25 16:47:26

Angular UI日期选择器不工作

回答

相关问题