kum*_*ded 2 javascript datepicker jquery-ui-datepicker angularjs angularjs-directive
以下是我使用的HTML和Javascript代码.
HTML代码:
<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脚本:
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();
}
});
}
};
});
现在,当我点击文本框时,日期选择器弹出窗口不会出现.
有人可以帮我解决这个日期选择器的工作吗？
我可以在你的代码中看到一些错误.你没有具体说明你使用的是哪个日期选择器,所以我认为它是基于你的标签的jquery.UI.
1)你还需要添加jquery.UI CSS
2)你不能使用element.datepicker.element不是jQuery对象.你需要把它变成jquery对象.像波纹管一样
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};
});
这是一个工作小提琴http://jsfiddle.net/esx6k1nc/
| 归档时间： |
|
| 查看次数： |
18036 次 |
| 最近记录： |