Angular 和 Datepicker 作为指令答案

【问题标题】：Angular and Datepicker as directiveAngular 和 Datepicker 作为指令
【发布时间】：2015-10-09 18:01:14
【问题描述】：

我正在尝试为日期选择器创建指令，因为我在表单上有多个日期输入字段，因此希望重用代码。我已经尝试了许多我在网上看到的版本，但遇到了麻烦。我想要的是，当用户标签/点击进入一个字段时，他们会看到一个日历，他们可以选择一个日期。

以下是我正在尝试的最新版本。

我的指令：

var app = angular.module('myApp.directives', []);

app.directive('ngDate', function() {
   return {
     restrict: 'A',
     require : 'ngModel',
     link : function (scope, element, attrs, ctrl) {
            element.datepicker({
            changeYear:true,
            changeMonth:true,
            dateFormat:'dd/M/yy',
            onSelect:function (date) {
                 ctrl.$setViewValue(date);
                 scope.$apply();
                }
            });
        }
    }; 
});

我的一个字段的 HTML：

<input type='text' data-ng-model='programDetails.requestDate' data-ng-date=''>

发生的情况是我收到一条错误消息：

TypeError: element.datepicker is not a function

关于我缺少什么的任何想法？我已经尝试了很多，大多数都给我一个非常相似的错误。我的目标是为其他 4 个日期字段再添加 4 个 HTML 行。

编辑： 我最终让 Bootstrap 日期选择器工作......但是......我在屏幕上有四个不同的日期。问题是当一个打开时，它们都打开了……我需要一次打开一个。我猜我需要以某种方式将打开/关闭与每个日期联系起来。

这是其中一个日期字段的新 HTML（每个看起来都一样，只是 ng-model 不同）：

    <span class="input-group" >
        <input type="text" class="input-sm " datepicker-popup="{{format}}"  ng-model="programDetails.startDate" is-open="opened"  datepicker-options="dateOptions" ng-focus="open($event)" ng-click="open($event)" close-text="Close" ng-change="updateDate(programDetails.startDate)" />
        <span class=" input-sm" >
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </span>

Controller:
    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
  };

如何将开盘价与每个特定日期字段联系起来？

【问题讨论】：

标签： jquery angularjs datepicker

【解决方案1】：

datepicker 是 jQuery UI 日期选择器插件。您目前似乎没有包含它。下载并包含jQuery UI library，或使用其他库，例如angular-datepicker。

【讨论】：

谢谢。我尝试使用 angular-datepicker（我下载了 js 文件）并认为我进行了 HTML 更改......现在至少我没有收到错误，但它没有弹出日历。我猜我还是做得不对。

【解决方案2】：

切换到引导程序的日期选择器后，我确实让它按照我的编辑中描述的那样工作。然后我遇到了所有日期选择器同时打开的麻烦。我在这里找到了解决方案Multiple Datepickers

感谢您的帮助。

【讨论】：