如何使用自定义指令作为类在 AngularJS 中使用日期选择器? [英] How to use datepicker in AngularJS using custom directive as a class?
问题描述
以下是我使用的 HTML 和 Javascript 代码.
HTML 代码:
<头><脚本src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script><script src="date.js"></script><身体><div ng-app="app"><input type="text" ng-model="date" class="datepicker"></input>{{ 日期 }}</html>
Java 脚本:
var datePicker = angular.module('app', []);datePicker.directive('datepicker', function () {返回 {限制:'C'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){element.datepicker({dateFormat: 'dd, MM, yy',onSelect:函数(日期){scope.date = 日期；范围.$应用()；}});}};});现在当我点击文本框时，日期选择器弹出窗口不会出现.
有人可以帮我解决一个使这个日期选择器工作的解决方案吗?
我发现您的代码中有一些错误.您没有具体说明您使用的是哪个日期选择器，所以我假设它是基于您的标签的 jquery.UI.
1) 你还需要添加 jquery.UI CSS
2) 您不能使用 element.datepicker.元素 不是 jQuery 对象.你需要把它变成 jquery 对象.如下图
HTML:
JS:
var app = angular.module('myApp', []);app.directive('datepicker', function () {返回 {限制:'C'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){$(element).datepicker({dateFormat: 'dd, MM, yy',onSelect:函数(日期){scope.date = 日期；范围.$应用()；}});}Y};});这是一个工作小提琴 http://jsfiddle.net/esx6k1nc/
Below are my HTML and Javascript code which I used.
HTML Code:
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="date.js"></script>
</head>
<body>
<div ng-app="app">
<input type="text" ng-model="date" class="datepicker"></input>
{{ date }}
</div>
</body>
</html>
Java Script:
var datePicker = angular.module('app', []);
datePicker.directive('datepicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'dd, MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
Now when I click on the textbox, the datepicker popup is not coming.
Can someone please help me with a solution to make this datepicker work?
I can see a few mistakes in your code. You have not specifically said which datepicker you are using so I assumed it was jquery.UI based on your tags.
1) you need to add jquery.UI CSS also
2) you can't use element.datepicker. element is not jQuery object. You need to make it into jquery object. like bellow
HTML:
<div ng-app="myApp">
<input type="text" ng-model="date" class="datepicker"></input>
</div>
JS:
var app = angular.module('myApp', []);
app.directive('datepicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'dd, MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
Y};
});
Here is a working fiddle http://jsfiddle.net/esx6k1nc/
这篇关于如何使用自定义指令作为类在 AngularJS 中使用日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
