Angular UI Bootstrap 日期选择器在打开时切换到今天

Question

背景

我正在添加一个日期，它支持 Angular UI Bootstrap，类似于我在这个 Plunk 中实现的。 Plunk 完全符合我的要求。

但是，在我的本地尝试中，所选日期切换到 today，而不是 ng-model 中设置的日期。

本地代码

<p class="input-group">
    <input type="text" class="form-control"
            uib-datepicker-popup="{{format}}"
            ng-model="person.DateOfBirth"
            is-open="stats.DateOfBirthOpened" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatepicker($event)">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</p>

脚本：

$scope.format = "dd/MM/yyyy";

$scope.stats = {
    DateOfBirthOpened: false
};

$scope.openDatepicker = function ($event) {
    $scope.stats.DateOfBirthOpened = true;
};

Plunk 代码

<div class="input-group">
    <input type="text" class="form-control" 
            uib-datepicker-popup="{{format}}" 
            ng-model="today" 
            is-open="status.opened" 
            min-date="minDate" 
            max-date="maxDate" 
            datepicker-options="dateOptions" 
            ng-required="true" 
            close-text="Close" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event)">
        <i class="fa fa-calendar"></i>
     </button>
    </span>
</div>

脚本：

$scope.status = {
    opened: false
};

$scope.open = function ($event) {
    $scope.status.opened = true;
};

$scope.dateFormat = "dd/mm/yyyy";

问题

据我所知，这两个实现非常相似（相同忽略语义差异），那么为什么本地代码不能正常工作（显示今天打开而不是 ng-model 值）？

附录

按要求提供完整的控制器 JavaScript 代码：

"use strict";

angular.module("controllers.mainControllers")
    .controller("personDetailController", [
        "$scope",
        function ($scope) {
            var self = {};

            self.Get = function () {
                if (coreUtilityService.IsValid($rootScope.PersoonId)) {
                    apiService.Get("api/person/" + $rootScope.PersoonId).then(function (person) {
                        $scope.person = person;
                        $scope.title = coreUtilityService.CombineTwoValuesWithSpace(person.Firstname, person.Lastname);
                    });
                };
            }

            // === $SCOPED === //

            self.Get();

            $scope.format = "dd/MM/yyyy";

            $scope.stats = {
                DateOfBirthOpened: false
            };

            $scope.openDatepicker = function ($event) {
                $scope.stats.DateOfBirthOpened = true;
            };
        }]);

$scope.person 输出：

{PersonId: "9245fe4a-d402-451c-b9ed-9c1a04247482", Firstname: "Jackie", Lastname: "Chan", DateOfBirth: "1968-05-17T00:00:00", CreateDate: "2015-12-11T09:15:49.403"…}
CreateDate: "2015-12-11T09:15:49.403"
DateOfBirth: "1968-05-17T00:00:00"
Firstname: "Jackie"
Lastname: "Chan"
ModifyDate: "2015-12-11T09:15:49.403"
PersonId: "9245fe4a-d402-451c-b9ed-9c1a04247482"

Answer 1

您的 plunk 中的日期格式错误，使用 "{{dd/MM/yyyy}}" 而不是 "{{dd/mm/yyyy}}"。

编辑： 此外，plunk 示例未正确绑定格式。将{{format}} 更改为{{dateFormat}}。