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

admin管理员组

文章数量:1287810

I am binding a variable to an input-field of type time, but the displayed format is wrong.

It displays the time like this: 08:54:30,088 What I actually need is a format like this: 08:54.

I tried to set the value of the input field with a filter ( value={{ datetime.date | date : 'HH:mm' }} ) but my editor says the way I do this is wrong. Any ideas?

Here the pltete code:

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()
       };
 } );

I am binding a variable to an input-field of type time, but the displayed format is wrong.

It displays the time like this: 08:54:30,088 What I actually need is a format like this: 08:54.

I tried to set the value of the input field with a filter ( value={{ datetime.date | date : 'HH:mm' }} ) but my editor says the way I do this is wrong. Any ideas?

Here the pltete code:

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()
       };
 } );

• javascript
• angularjs

Share Improve this question Follow edited May 2, 2016 at 8:42 mathieu 31.2k44 gold badges6666 silver badges9191 bronze badges asked May 2, 2016 at 7:02 Sven YaSven Ya 56211 gold badge55 silver badges1313 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I circumvented the problem by defining the Date()-object a bit. It works but I don't like this way of double defining.

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() );

UPDATE of js

with the idea of using a $filter from Jimbrooism I found a shorter way!

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

Pls check out this

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./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>

Try this:

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

Do you need the model to be bound to an input element? Applying filters to input fields usually generates warnings or errors, since filters are one-way, and binding existing value to input and then changing them there is a two-way binding.

If you don't need to be able to change the element, consider changing input to something else, like

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

If you have to use input, Jimbroosim's answer would work.

本文标签： javascriptHow to format the value of inputtime when bound to Date()objectStack Overflow