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仍然有效。

在您的示例中，抛弃格式化过滤器，只需在有效的ng-model="vm.account.dateLastLogin"输入上使用date，例如：

<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

AngularJS格式日期为只读字段

1 个答案: