ui.bootstrap.datepicker：将 "displayed date format" 与 "ng-model date format" 解耦

Question

我是 Angular 和 JS 的新手，因此如果我的问题很微不足道，我很抱歉。

我正在使用 ui.bootstrap.datepicker 修改我的 foo 模型的 date 属性。我的 foo.date 是一个像 '2000-01-31' 这样的字符串。我想要的是将 foo.date 的形式可视化为 January 31, 2000，同时将 'foo.date' 格式保留为 '2000-01-31'.

这是我的约会对象：

<div class="input-group">
    <input type="text"
    class="form-control"
    datepicker-popup="MMMM dd, yyyy"
    ng-model="foo.date"
    is-open="opened"
    ng-required="true"
    show-weeks = 'false'
    close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="pdfc.open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>

如果我将 datepicker-popup 设置为 "MMMM dd, yyyy"，模型的原始日期格式将被破坏。我看到这样的东西：

"2000-01-31T00:00:00.000Z"

...而不是这个：

2000-01-31

我读了一些相关的解决方案，比如this one，但是指令.directive('datepickerPopup', function (){...}是"overridden" by datepicker-popup的形式.

在此 plnkr 中，您可以看到我的实际问题。有没有很好的方法来分离这两种日期格式？

Answer 1

使用日期过滤器。 Here 是它能做的。首先向您的控制器注入过滤器服务：

.controller('myCtrl',['$filter','$scope',function($filter,$scope){//..}]);

如果您要注入其他服务，请阅读依赖注入。

其次，使用日期过滤器分配新变量。

var dateView = $filter('date')($scope.foo.date,'MMMM d, yyyy');

然后你可以显示它：（控制器）

$scope.foo.fDate = dateView;

（查看）

{{foo.fDate}}

要在更改后观察它，请对其进行监视：

$scope.$watch(function() { return $scope.foo.date; },
function(n,o){
 var dateView = $filter('date')($scope.foo.date,'MMMM d, yyyy');
 $scope.foo.fDate = dateView;
});

它会监听变化并改变它。最好在另一个变量中显示它。当然你可以在 watch 中设置而不是 fDate，foo.date，但你可能会帮助解决手动编辑标签的问题，因为变量将在写入一个字母后发生变化。

ui.bootstrap.datepicker：将 "displayed date format" 与 "ng-model date format" 解耦

ui.bootstrap.datepicker: decoupling "displayed date format" from "ng-model date format"

angularjs

angular-ui-bootstrap