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

//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();
        }
    };
}]);

这工作正常，从日历弹出窗口中选择日期时日期格式正确。但是，如果我在 Controller 中设置 ng-model 的日期，则该日期的格式不会为“dd MMMM yyyy”，而是作为日期字符串返回，例如 Sat Oct 01 2016 01:00:00 GMT+0100 (GMT Daylight时间)。但是在 Plunker 中，我可以在 Controller 中设置一个日期并且它的格式很好。 这是我的日期选择器的 HTML:

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

在我的 Controller 中 startDate.value = new Date();

我不确定问题出在哪里。下图显示了我得到的结果。

最佳答案

我在本地尝试了您的代码，它似乎运行良好，没有任何问题。 我尝试了各种更改日期的方法，但一切正常。 plnkr 中的示例与您发布的示例之间似乎有些不同，特别是您引用日期的方式(您说您正在使用 startDate.value = new Date(); ，但在 plnkr 中，我看到了 ng-model="dtpValue1" 。这让我觉得你还缺少其他东西，我建议在一个可在本地测试的 .zip 文件中制作一个完整的示例. 此外，由于有可能没有人能够再次复制它，因此您拥有的所有 chrome 扩展和操作系统的列表将很有用，最重要的是，您应该尝试在其他机器上复制它并报告结果.

一般来说，期望工作的东西在我测试过的每台机器上都按预期工作，我没有看到它不应该工作的充分理由。

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

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

关于javascript - 当最初在范围内设置值时，日期选择器弹出格式不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38656500/