use*_*037 51 jquery jquery-ui angularjs
我想在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'.
Kev*_*nes 44
我和你的作品几乎完全相同.
你有页面中包含的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"
vic*_*ont 32
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();
}
});
}
};
});
Nah*_*ahn 11
作为最佳实践,特别是如果您有多个日期选择器,则不应对元素的范围变量名称进行硬编码.
相反,您应该获取单击的输入ng-model并在onSelect方法内更新其对应的范围变量.
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提出的问题(嵌套元素),我修改了我的答案
我终于能够在角度js中运行datepicker指令,这里有指针
按顺序包括以下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>
在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中,请确保首先为指令编写代码,然后为控制器添加代码,否则会导致问题.
日期选择器指令:
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
};
以棱角分明的js 尝试这个INSTEAD
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
以及jquery.js和jquery-ui.js
我们可以将angular js datepicker实现为
<input type="date" ng-model="date" name="DOB">
这使得内置的datepicker和日期在ng-model中设置,可用于进一步处理和验证.
在使用以前的方法进行了许多成功的头撞之后找到了这个.:)
Rai*_*baz -3
我认为您在模块声明中缺少 Angular ui bootstrap 依赖项，如下所示：
angular.module('elnApp', ['ui.bootstrap'])
请参阅Angular-ui-bootstrap 的文档。
| 归档时间： |
|
| 查看次数： |
107238 次 |
| 最近记录： |