当绑定到Date(）-对象时，如何格式化input[time]的值

How to format the value of input[time] when bound to Date()-object

本文关键字：格式化 input 的值 time Date 绑定 对象      更新时间：2023-09-26

我正在将一个变量绑定到时间类型的输入字段，但显示的格式是错误的。

它显示的时间如下：08:54:30,088我实际需要的是这样一种格式：08:54。

我试图用过滤器（value={{ datetime.date | date : 'HH:mm' }}）设置输入字段的值，但我的编辑器说我这样做的方式是错误的。有什么想法吗？

这里是完整的代码：

HTML

 <input id="rep_time" class="form-control" type="time" ng-model="datetime.time" value={{ datetime.date | date : 'HH:mm' }}>

JS

 app.controller( 'newCtrl', function( $scope ) {  
     $scope.datetime = {
         date: new Date(),
         time: new Date()
       };
 } );

我通过定义Date（）-对象来避免这个问题。它有效，但我不喜欢这种双重定义的方式。

HTML

 <input class="form-control" type="date" ng-model="datetime.date" placeholder="yyyy-MM-dd" min="2016-01-01" required />
 <input class="form-control" type="time" ng-model="datetime.time">

JS

$scope.datetime = {
        date: new Date(),
        time: ''
    };
$scope.datetime.time = new Date(
            $scope.datetime.date.getFullYear(),
            $scope.datetime.date.getMonth() + 1,
            $scope.datetime.date.getDate(),
            $scope.datetime.date.getHours(),
            $scope.datetime.date.getMinutes() );

js的更新

有了使用Jimbrooism中的$filter的想法，我找到了一个更短的方法！

$scope.datetime = {
     date: new Date(),
     time: new Date( $filter( 'date' )( new Date(), 'yyyy-MM-dd HH:mm' ) )
   };

请查看此

var app = angular.module("mainApp",  []);
app.controller('mainCtrl', function($scope, $filter){
  $scope.datetime = {
         date: new Date(),
         time: $filter('date')( new Date(), 'HH:mm')
       };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <input id="rep_time" class="form-control" type="time" ng-model="datetime.time" >
</div>

试试这个：

<input id="rep_time" class="form-control" type="time" ng-model="datetime.time" data-ng-value={{ datetime.date | date : 'shortTime'}}>

是否需要将模型绑定到输入元素？将筛选器应用于输入字段通常会生成警告或错误，因为筛选器是单向的，并且将现有值绑定到输入，然后更改它们是双向绑定。

如果您不需要能够更改元素，可以考虑将输入更改为其他内容，如

<div ng-bind="datetime.date | date : 'HH:mm'"></div>

如果你必须使用输入，金布罗辛的答案会起作用。

相关文章：