Question

我在Plunker（http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview）上使用此自定义指令使用Angular UI引导日期选择器弹出窗口：

//Module
var userModule = angular.module("userModule",['ui.bootstrap']);

//Controller
userModule.controller("sampleController", ['$scope', function ($scope) {
    $scope.minDate = new Date();
}]);

//Directive code
userModule.directive('datePicker', [function (dateFilter) {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            ngReadonly: '=?',
            minDate: '=?',
            maxDate: '=?',
            dtpRequired: '=?',
            dateOptions: '=?'
        },
        template: '<p class="input-group">' +
                    '<input type="text" style="cursor:pointer" class="form-control" datepicker-popup="{{format}}"' +
                        'ng-model="ngModel" is-open="opened"' +
                            'min-date="minDate" max-date="maxDate"' +
                                'datepicker-options="dateOptions" date-disabled="disabled(date, mode)"' +
                                 'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                         '<span class="input-group-btn">' +
                            '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                                '<i class="fa fa-calendar"></i></button>' +
                        '</span>' +
                    '</p>',
        controller: function ($scope) {
            // check if it was defined.  If not - set a default
            $scope.dateOptions = $scope.dateOptions || {
                formatYear: 'yy',
                startingDay: 1,
                showWeeks: false
            };

            $scope.openPopup = function ($event) {
                if ($event !== undefined) {
                    $event.stopPropagation();
                }
                $scope.opened = true;
            };

            $scope.format = 'dd MMMM yyyy';
        },
        link: function ($scope, element, attrs, controller) {
            //remove the default formatter from the input directive to prevent conflict
            controller.$formatters.shift();
        }
    };
}]);

这工作正常，从日历弹出窗口中选择日期时日期格式正常。但是，如果我在控制器中设置了ng-model的日期，则日期不会被格式化为'dd MMMM yyyy'，而是作为日期字符串返回，例如Sat Oct 01 2016 01:00:00 GMT + 0100（GMT Daylight）时间）。但是在Plunker中，我可以在控制器中设置日期并且格式正常。这是我的日期选择器的HTML：

<date-picker ng-model="startDate.value" datepicker-options="dateOptions" min-date="minDate" ng-readonly="true"></date-picker>

在我的控制器startDate.value = new Date();

中

我不确定问题出在哪里。下图显示了我要回来的内容。

Answer 1

我在本地尝试了您的代码，它看起来效果很好，没有任何问题。我尝试了各种改变日期的方法，但一切都有效。 plnkr中的示例与您发布的示例之间似乎有一些区别，特别是您引用日期的方式（您声明使用的是 startDate.value = new Date（）; ，但是在plnkr中，我看到 ng-model =“dtpValue1”。这让我觉得还有其他一些你缺少的东西，我建议在一个本地可测试的.zip文件中做一个完整的例子此外，由于有可能没有人能够再次重现它，所以你所拥有的所有Chrome扩展和操作系统列表都很有用，最重要的是你应该尝试在其他机器上重现它并报告结果

一般来说，期望工作的是在我测试的每台机器上按预期工作，但我没有看到它为什么不起作用的充分理由。

如果我能够重现这个问题，我可以放置断点并弄清楚究竟发生了什么，但目前这是不可能的，我们应该关注如何重现问题。

提供的信息似乎不足以解决此问题。

Answer 2

由于引导UI，datepicker实际上与字符串一起使用，并且您正在尝试将javascript日期对象分配给UI引导程序在角度控制器上工作的变量。它们是不同类型的数据，因此会导致错误。如果您尝试控制变量的类型，请从datepicker弹出窗口中选择一个日期。你会看到它是一个字符串。所以..如果你想从你的控制器设置一个日期，你只需要将它设置为字符串，而不是javascript对象。

Answer 3

终于找到了解决方案。我从Angular-UI-Bootstrap更改为uib-datepicker指令，现在它在控制器中设置日期时正确格式化日期！这是我的指令中的HTML模板供参考：

template: '<p class="input-group">' +
            '<input type="text" style="cursor:pointer" class="form-control" uib-datepicker-popup="{{format}}"' +
                'ng-model="ngModel" is-open="opened"' +
                    'min-date="minDate" max-date="maxDate"' +
                        'datepicker-options="dateOptions"date-disabled="disabled(date, mode)"' +
                         'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                 '<span class="input-group-btn">' +
                    '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                        '<i class="fa fa-calendar"></i></button>' +
                '</span>' +
            '</p>'

Answer 4

我写了这个指令，将string格式服务器转换为uib-datepicker-popup需要的有效javascript格式：

app.directive('datepickerLocaleDate', ["$rootScope", "$filter", function ($rootScope, $filter) {
   return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

         if (ngModel) {

           // convert string to valid javascript fprmat 
            setTimeout(() => {
               ngModel.$setViewValue(new Date(ngModel['$viewValue']));
            }, 3000);


            ngModel.$parsers.push(function (value) {
              return new Date(value);
            });

            ngModel.$formatters.push(function (value) {
              return value ? $filter('date')(value, 'yyyy/MM/dd') : null;
            });

         }
      }
   };
}]);

最初在范围内设置值时，Datepicker-popup格式化不起作用

4 个答案: