使 AngularUI 日期选择器成为实际指令

Question

我正在尝试将 angular-ui's date-picker 变成一个实际的指令。

我可以用正确的模型和格式在页面上显示它，但切换对我不起作用（试图通过属性命名）。

这是我的代码：我的 html

<date-picker data-format="dd/MM/yyyy" data-model-name="dateReviewed" data-ng-model="oneWMS.dateReviewed" data-status="statusDateReviewed" data-opened="openDateReviewed"></date-picker>

我的指令

function datePicker() {
          return {
            restrict: 'AE',
            require: 'ngModel',
            scope: {
                format: '@',
                mod: '=ngModel',
                status: '@',
                opened: '@'

                },
            template: '<div class="input-group">' +
                     '<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mod" is-open="status.opened" ng-required="true" close-text="Close" />' +
                     '<span class="input-group-btn">' +
                     '<button type="button" class="btn btn-default" ng-click="opened($event)"><i class="glyphicon glyphicon-calendar"></i> </button>' +
                     '</span>' +
                 '</div>',
            link: function(scope, iElement, iAttrs) {
                    // all the directive code
                    console.log(iAttrs.format); // dd/MM/yyyy
                    console.log(iAttrs.ngModel); //  oneWMS.dateReviewed
                    console.log(iAttrs.status); // statusDateReviewed
                    console.log(iAttrs.opened); // openDateReviewed
                    console.log(iAttrs.modelName); // dateReviewed

                    var modelStatusDate = iAttrs.status;
                    var modelOpenDate = iAttrs.opened;
                    var modelName = iAttrs.modelName;

                    scope.today = function() {
                        scope.modelName = new Date();
                        scope.dateApproved = new Date();
                      scope.today();

                      scope.clear = function () {
                        scope.modelName = null;
                      };

                      scope.modelOpenDate = function($event) {
                        scope.modelStatusDate.opened = true;
                      };

                      scope.modelStatusDate = {
                        opened: false
                      };


                      scope.getDayClass = function(date, mode) {
                        if (mode === 'day') {
                          var dayToCheck = new Date(date).setHours(0,0,0,0);

                          for (var i=0;i<scope.events.length;i++){
                            var currentDay = new Date(scope.events[i].date).setHours(0,0,0,0);

                            if (dayToCheck === currentDay) {
                              return scope.events[i].status;
                            }
                          }
                        }

                        return '';
                      };

                } // link
          } // return
    } // picker
    }

不知道是只打开选择器不行还是日期选择也会失败

Answer 1

我使用 angularui 日期选择器制作了自定义日期指令。看看吧，也许对你有用。这是 plunkr url 。 http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp.

Answer 2

如果您使用 Angular 和 Bootstrap，我强烈建议您使用 Angular UI Bootstrap。

其他 Angular UI 库未得到积极维护。

使 AngularUI 日期选择器成为实际指令

Making AngularUI datepicker an actual directive

datepicker

angularjs

angular-ui-bootstrap