"ng-model" 值与 Bootstrap UI 日期选择器无效

Question

我正在尝试在我的 AngularJS 应用程序中实现一个简单的日期选择器指令。在 UI Bootstrap Documentation 之后，我每次都会收到此错误：

Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.

我发现了一些其他相关问题 here and here，但它们都没有帮助。

我尝试按照建议访问 $parent 和 $parent.$parent here，这将消除错误，但不会更新模型。

这是一个重现问题的 Plunker：

http://plnkr.co/edit/CAUGqZnH77SbknmGTFiL?p=preview

<!DOCTYPE html>
<html>

  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
      <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
 </head>

  <body ng-app="myApp" ng-controller="AppControl as appCtrl">
    <label>{{dt | date:'fullDate'}}</label>

    <input type="text" 
             class="form-control" 
             datepicker-popup="MMMM d, yyyy 'at' h:mm a" 
             ng-model="dt" 
             is-open="opened"
             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)">Pick</button>
    </span>

    <script>
      angular.module("myApp", ['ui.bootstrap']).controller("AppControl", ["$scope", function($scope) {
        $scope.opened = false;
        $scope.dateOptions = {};
        $scope.dt = new Date();
        $scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened = true;
        };
      }]);
    </script>
  </body>
</html>

Answer 1

问题在于您在属性 'datepicker-popup' 中提供的格式。

使用属性的值作为'longDate'如下：

datepicker-popup="longDate"

使用如下：

<input type="text" 
             class="form-control" 
             datepicker-popup="fullDate" 
             ng-model="dt" 
             is-open="opened"
             datepicker-options="dateOptions"
             ng-required="true" 
             close-text="Close" />

我更新了 plnkr。

"ng-model" 值与 Bootstrap UI 日期选择器无效

Invalid "ng-model" value with Bootstrap UI datepicker

javascript

datepicker

twitter-bootstrap

angularjs

angular-ui-bootstrap