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

Question

背景

我正在添加一个日期，该日期具有Angular UI Bootstrap支持，类似于在此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;
};

随便码

<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";

题

据我所知，两种实现都非常相似（完全忽略语义差异） ，那么为什么本地代码不能正常工作（今天显示为open而不是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

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

编辑：另外，松散的示例未正确绑定格式。 将{{format}}更改为{{dateFormat}} 。