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

Question

Background

I'm adding a date, with Angular UI Bootstrap support, similar like I have implemented in this Plunk . The Plunk does exactly what I want it to do.

However, on my local attempt, the selected date switches to today , rather than the date set in ng-model .

Local code

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

Script:

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

$scope.stats = {
    DateOfBirthOpened: false
};

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

Plunk code

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

Script:

$scope.status = {
    opened: false
};

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

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

Question

As far as I can tell both implementations are very similar (identical ignoring semantical differences) , so why is the local code not working correctly (displaying today on open rather than ng-model value)?

Addendum

Full controller javascript code as requested:

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

And $scope.person output:

{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

The date format in your plunk is wrong use "{{dd/MM/yyyy}}" instead of "{{dd/mm/yyyy}}" .

EDIT: Also the plunk example does not bind the format correctly. Change {{format}} to {{dateFormat}} .