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网址。 http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp。

Answer 2

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

其他Angular UI库未得到主动维护。

使AngularUI datepicker成为一个实际的指令

2 个答案: