Fatal编程技术网
  • javascript/
  • Javascript 如何使用自定义指令作为类在AngularJS中使用datepicker？

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

javascript angularjs

Javascript 如何使用自定义指令作为类在AngularJS中使用datepicker？,javascript,angularjs,angularjs-directive,datepicker,jquery-ui-datepicker,Javascript,Angularjs,Angularjs Directive,Datepicker,Jquery Ui Datepicker,下面是我使用的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

下面是我使用的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>

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） 不能使用元素.datepicker元素不是jQuery对象。您需要将其转换为jquery对象。像吼叫

HTML:

JS:

这是一把工作小提琴

我不确定这是否与引导数据采集器的格式相同。这在使用引导数据采集器时对我有效。将此添加到控制器：

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

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