Question

我是Angular和JS的新手，所以如果我的问题非常简单，我很抱歉。

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

这里有我的datepiker：

<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 (){...}在表单中由datepicker-popup “覆盖”。

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

Answer 1

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

signall()

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

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

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

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

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

（查看）

$scope.foo.fDate = dateView;

要在更改后观察它，请设置监视：

{{foo.fDate}}

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

ui.bootstrap.datepicker：将“显示的日期格式”从“ng-model日期格式”中解耦

1 个答案: