与Angularjs jQuery ui datepicker
我想用AngularJS使用jQuery UI datepicker。
我有一个示例，但我的代码不起作用。
样品：
http://www.abequar.net/jquery-ui-datepicker-with-angularjs/
我的代码：
<input id="sDate" name="programStartDate" type="text" datepicker required/> angular.module('elnApp') .directive('datepicker', function () { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { $(function(){ element.datepicker({ dateFormat:'yy-mm-dd', onSelect:function (date) { ngModelCtrl.$setViewValue(date); scope.$apply(); } }); }); } } }); 它显示一个错误TypeError: Object [object Object] has no method 'datepicker' 。
我有几乎完全相同的代码，你和我的作品。
你有没有在页面中包含jQueryUI.js？
这里有一个小提琴
<input type="text" ng-model="date" jqdatepicker /> <br/> {{ date }} var datePicker = angular.module('app', []); datePicker.directive('jqdatepicker', 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(); } }); } }; });
您还需要在HTML中的某个地方使用ng-app =“app”
angular.module('elnApp') .directive('jqdatepicker', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ctrl) { $(element).datepicker({ dateFormat: 'dd.mm.yy', onSelect: function(date) { ctrl.$setViewValue(date); ctrl.$render(); scope.$apply(); } }); } }; });
作为一种最佳实践，尤其是如果您有多个dateselect器，则不应该对元素的范围variables名称进行硬编码。
相反，你应该得到点击input的ng-model并在onSelect方法内更新其相应的范围variables。
app.directive('jqdatepicker', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModelCtrl) { $(element).datepicker({ dateFormat: 'yy-mm-dd', onSelect: function(date) { var ngModelName = this.attributes['ng-model'].value; // if value for the specified ngModel is a property of // another object on the scope if (ngModelName.indexOf(".") != -1) { var objAttributes = ngModelName.split("."); var lastAttribute = objAttributes.pop(); var partialObjString = objAttributes.join("."); var partialObj = eval("scope." + partialObjString); partialObj[lastAttribute] = date; } // if value for the specified ngModel is directly on the scope else { scope[ngModelName] = date; } scope.$apply(); } }); } }; });
编辑
为了解决@Romain提出的问题（嵌套元素），我修改了我的答案
我终于能够在angularjs运行datepicker指令，这里是指针
包括以下JS依次
- 的jquery.js
- jQuery的ui.js
- angularmin.js
我添加了以下内容
<script src="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>
在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中，确保你先编写代码，然后再为代码添加代码，否则会导致问题。
dateselect器指令：
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 };
试试这个INSTEADangularjs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
以及jquery.js和jquery-ui.js
我们可以实现angular js datepicker as
<input type="date" ng-model="date" name="DOB">
这使内置的dateselect器和date在ng模型中设置，并可用于进一步处理和validation。
经过以前的做法，很多成功的headbanging后发现这一点。 🙂
onSelect在ng-repeat中不能正常工作，所以我使用事件绑定做了另一个版本
HTML
<tr ng-repeat="product in products"> <td> <input type="text" ng-model="product.startDate" class="form-control date-picker" data-date-format="yyyy-mm-dd" datepicker/> </td> </tr>
脚本
angular.module('app', []).directive('datepicker', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datepicker(); element.bind('blur keyup change', function(){ var model = attrs.ngModel; if (model.indexOf(".") > -1) scope[model.replace(/\.[^.]*/, "")][model.replace(/[^.]*\./, "")] = element.val(); else scope[model] = element.val(); }); } }; });
不幸的是，vicont的答案并不适合我，所以我search了另一个优雅的解决scheme，也适用于ng模型中的嵌套属性。 它使用$ parse并通过链接函数中的attrs访问ng模型，而不是要求：
myApp.directive('myDatepicker', function ($parse) { return function (scope, element, attrs, controller) { var ngModel = $parse(attrs.ngModel); $(function(){ element.datepicker({ ... onSelect:function (dateText, inst) { scope.$apply(function(scope){ // Change binded variable ngModel.assign(scope, dateText); }); } }); }); } });
来源： ANGULAR.JS绑定到JQUERY UI（DATEPICKER示例）
我修改了代码并在$ apply（）中封装了视图更新。
link: function (scope, elem, attrs, ngModelCtrl){ var updateModel = function(dateText){ // call $apply to update the model scope.$apply(function(){ ngModelCtrl.$setViewValue(dateText); }); }; var options = { dateFormat: "dd/mm/yy", // handle jquery date change onSelect: function(dateText){ updateModel(dateText); } }; // jqueryfy the element elem.datepicker(options);
}
我find的最好的文章如下： http : //www.abequar.net/posts/jquery-ui-datepicker-with-angularjs
花了20分钟将其与我的网页整合。
这是我的代码 –
var datePicker = angular.module('appointmentApp', []); datePicker.directive('datepicker', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { $(element).datepicker({ dateFormat: 'dd-mm-yy', onSelect: function (date) { scope.appoitmentScheduleDate = date; scope.$apply(); } }); } }; });
myModule.directive('jqdatepicker', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datepicker({ dateFormat: 'dd/mm/yy', onSelect: function (date) { var ar=date.split("/"); date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]); ngModelCtrl.$setViewValue(date.getTime()); // scope.course.launchDate = date; scope.$apply(); } }); } }; });
HTML代码：
<input type="text" jqdatepicker ng-model="course.launchDate" required readonly />
您主要的Angular的Index.html文件可以使用body标签作为ng-view。 然后，所有你需要做的就是在任何页面的底部包含一个脚本标签，这些页面被Angular拉到Index.html中，如下所示：
<script type="text/javascript"> $( function() { $( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true, yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"}); }); </script>
为什么过分复杂？
我有同样的问题，它通过把参考和包括的顺序解决：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
var datePicker = angular.module('app', []); datePicker.directive('jqdatepicker', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datepicker({ dateFormat: 'dd/mm/yy', onSelect: function (date) { scope.date = date; scope.$apply(); } }); } }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <body ng-app="app"> <input type="text" ng-model="date" jqdatepicker /> <br/> {{ date }} </body>
var selectDate = element.datepicker({ dateFormat:'dd/mm/yy', onSelect:function (date) { ngModelCtrl.$setViewValue(date); scope.$apply(); } }).on('changeDate', function(ev) { selectDate.hide(); ngModelCtrl.$setViewValue(element.val()); scope.$apply(); });
我想你的模块声明中缺lessAngular ui bootstrap依赖项，如下所示：
angular.module('elnApp', ['ui.bootstrap'])
查看Angular-ui-bootstrap 文档 。
