Bootstrap UI datepicker 的“ng-model”值无效答案

【问题标题】：Invalid "ng-model" value with Bootstrap UI datepickerBootstrap UI datepicker 的“ng-model”值无效
【发布时间】：2015-09-12 07:49:28
【问题描述】：

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

Datepicker 指令：“ng-model”值必须是 Date 对象、数字自 01.01.1970 以来的毫秒数或表示 RFC2822 的字符串或 ISO 8601 日期。

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

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

这是一个 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>

【问题讨论】：

标签： javascript angularjs twitter-bootstrap datepicker angular-ui-bootstrap

【解决方案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。

【讨论】：

谢谢！那么有没有办法添加自定义日期格式？还是我用的那个有问题。我过去使用它没有问题。
您可以使用任何返回 Date 对象的格式，显然您使用的格式没有返回 Date 对象。有关更多日期格式，请查看：docs.angularjs.org/api/ng/filter/date
@VaibhavPachauri 文档说过滤器以新格式返回字符串。这是 datepicker-pop 抛出错误的原因吗？
@alphapilgrim 问题很可能是 ui-datepicker 指令无法解析格式 "MMMM d, yyyy 'at' h:mm a" 。可能没有正确解析文字“at”。不过我不确定。必须测试一下:)