用于日历的 AngularJS 指令答案

【问题标题】：AngularJS directive for calendar用于日历的 AngularJS 指令
【发布时间】：2016-12-13 04:43:25
【问题描述】：

我正在将现有网站迁移到 AngularJS，但我在使用 Boostraps 的日期选择器时遇到了问题。

HTML：

<div id="calendar" class="pull-right"></div>

JS：

$('#calendar').on('changeDate', function(event) {
    window.location.href = '/appointments?date=' + event.format();
});

我尝试过编写这样的指令，但它不起作用。

HTML

<div id="calendar" class="pull-right" datepicker></div>

JS：

.directive('datepicker', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.datepicker({
                onChangeDate: function() {
                  ...
                }
            });
        }
    };
})

有什么想法吗？

【问题讨论】：

你需要jquery来添加bootstrap-datepicker
试试 Angular UI Bootstrap directives - 它们是专门为 Angular 制作的，并消除了对完整 jQuery 库的依赖。
供您参考link

标签： javascript angularjs angularjs-directive bootstrap-datepicker

【解决方案1】：

然后将 jquery 包含到您的项目中

.directive('datepicker', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).datepicker({
                onChangeDate: function() {
                  ...
                }
            });
        }
    };
})

【讨论】：

【解决方案2】：

this post 的答案之一对我有用。

app.directive('datetimez', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.datetimepicker({
      ...
      }).on('changeDate', function(e) {
        ...
      });
    }
};

});

【讨论】：