AngularJS在只读字段中格式化日期

Question

我在使用 AngularJS 格式化只读字段中的日期时遇到问题。这是我的 html 代码 -

        <div class="row">
            <label class="col-md-2">Date Last Login:</label>
            <div class="col-md-3">
                <input type="datetime" name="dateLastLogin" class="form-control" data-ng-model="loginDate" readonly />
            </div>
        </div>

我已尝试在我的控制器中使用此代码对其进行格式化 -

$scope.$watch('vm.account.dateLastLogin', function(newValue) {
    $scope.loginDate = $filter('date')(newValue, 'MM/DD/yyyy');
});

在控制器中设置一个断点，我看到函数被调用但没有显示任何内容。

如果我像这样离开我的 html -

        <div class="row">
            <label class="col-md-2">Date Last Login:</label>
            <div class="col-md-3">
                <input type="text" name="dateLastLogin" class="form-control" data-ng-model="vm.account.dateLastLogin" readonly />
            </div>
        </div>

我得到一个显示的值，其中包括日期和时间，但没有按照我的需要进行格式化。我错过了什么？

Answer 1

根据this 的回答，W3C 从 HTML5 规范中删除了datetime 输入类型。 date 和 datetime-local 仍然有效。

在您的示例中，丢弃格式过滤器并简单地在有效的date 输入上使用ng-model="vm.account.dateLastLogin"，例如：

<input type="date" ng-model="vm.account.dateLastLogin" />

或

<input type="datetime-local" ng-model="vm.account.dateLastLogin" />

这些日期格式已根据客户端浏览器区域设置正确格式化。

或者，如果您实际上只是想在某个文本字段中使用它，请将过滤器直接放在 ng-model 中，但仍使用有效的 Date 对象，例如：

<input type="text" ng-model="vm.account.dateLastLogin | date:'MM/dd/yyyy'" readonly />

有关示例，请参阅 this jsBin