Question

以下是我使用的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();
                }
            });
        }    
    };
});

现在，当我点击文本框时，日期选择器弹出窗口不会出现。

有人可以帮我解决一下这个日期选择器的工作原理吗？

Answer 1

我可以在代码中看到一些错误。你没有具体说明你使用的是哪个日期选择器，所以我认为它是基于你的标签的jquery.UI。

1）你还需要添加jquery.UI CSS

2）您无法使用 element.datepicker 。元素不是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/

Answer 2

我不确定这是否与bootstrap-datepicker的格式相同。当使用bootstrap-datepicker时，这对我有用。将其添加到您的控制器：

$('#datepicker').datepicker({
    todayHighlight: true,
    format: 'mm/dd/yyyy',
    autoclose: true
 }).on('changeDate', function (date) {
    $scope.date = date.format();
    $scope.$apply();
});

如何使用自定义指令作为类在AngularJS中使用datepicker？

2 个答案: