I want AngularJS to get the time portion string from the input type = 'time' value.

<input type="time"ng-model="tm"/>

describe in HTML $scope.tm in the controller,
Thu Jan 01 1970 15:32:00 GMT+0900(JST)
and so on.

The HTML input field says 15:32:00, but I can't get that value.

Please tell me how to get it in hh:tt:ss format like 15:32:00.

AngularJS1.3.0
Cordova 4.1.0

html monaca angularjs cordova

2022-09-30 20:32

4 Answers

According to the AngularJS 1.3.0 document, ng-model bound to the [type=time] input returns the Date object.This means that Thu Jan 01 1970 15:32:00 GMT+0900(JST) is already a date object.

Once you know that, it's a question of how to get the date object into the desired format.

How to get and stick the required values in the standard method in the date object as Sieg replied
- Quickest
- If you want to format something a little clever, such as displaying AM/PM, it will take a lot of time
How to format with the date processing library as described in Hiroyuki Ishiyama's response
- Library Deployment Required
- Easy to handle complex formatting

Quickest

If you want to format something a little clever, such as displaying AM/PM, it will take a lot of time

Library Deployment Required

Easy to handle complex formatting

Since has already appeared, here is how to use the AngularJS date filter within the controller:

Inject //$filter service
.controller("AppCtrl", ['$scope', '$filter', function($scope,$filter){
    // Invoke the Date Filter
    var timeString=$filter('date')($scope.tm, 'HH:mm:ss');
}]);

This is only done with AngularJS and has the advantage of being able to format a little cleverly.

 angular.module("App", [ ])
.controller("AppCtrl", ['$scope', '$filter', function($scope,$filter){
  $scope.tm = new Date(1970,0,1,15,32,0);
  $scope.$watch('tm', function(newValue){
    $scope.tmType=type of newValue;
    $scope.formatted = $filter('date') (newValue, 'HH:mm:ss');
  });
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="App"ng-controller="AppCtrl">
  <div>
    <input type="time"ng-model="tm"/>
  </div>
  <div>
    <pre><code>typeof$scope.tm</code></pre>
    {{ tmType}}
  </div>
  <div>
    <preng-non-bindable><code>{{tm|date:'HH:mm:ss'}}</code></pre>
    {{ tm | date: 'HH:mm:ss'}}
  </div>
  <div>
    <pre><code>$filter('date')</code></pre>
    {{ formatted}}
  </div>
</div>

2022-09-30 20:32

You can get the parameters you need by initializing with the Date type as follows:

var test_date=new Date("Thu Jan 01 1970 15:32:00 GMT+0900(JST)");
alert(test_date.getHours()+":"+test_date.getMinutes()+":"+test_date.getSeconds());

2022-09-30 20:32

I think it would be good to create a Directive like the one below and apply Filter at the binding stage.
If this is the case, it won't be a burden to increase the number of targets.

app.directive("timeModel", function(dateFilter){
    US>return{
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value){
                return dateFilter(value, 'HH:mm:ss');
            })
        }
    }
})

If you do this, on the html side

<input type="time"ng-model="tm"time-model/>
<input type="time"ng-model="tm2"time-model/>
<input type="time"ng-model="tm3"time-model/>

All models are bound in the HH:mm:ss string.
(You don't have to write the code to filter each time the number of models increases.On the other hand, it becomes a character type, so you need to convert it on your side to treat it as a Date type frequently.I'll come up with a solution for this later.)

Below is a sample block.

var app=angular.module("app", []);

app.directive("timeModel", function(dateFilter){
    US>return{
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value){
                return dateFilter(value, 'HH:mm:ss');
            })
        }
    }
})

app.controller("AppCtrl", function($scope){
    // The controller code was written only for demonstration purposes.
    // Not required to retrieve characters in HH:mm format.
    // In the question, the problem is that the value taken out by the controller is not `HH:mm:ss`.
    // So I prepared a controller-side code.
    // *The controller itself is specified by the ng-controller, so it is necessary.

    $scope.anotherModel="";

    $scope.typeOf=function(value){
        return (type of value);
    }
    $scope.copyToAnotherModel=function(){
        $scope.anotherModel=$scope.tm;
    }
})

<div ng-app="app"ng-controller="AppCtrl as app">
    <div>
        <input type="time"ng-model="tm"time-model/>
    </div>
    <div>tm=value: '{{tm}}', type: '{{typeOf(tm)}}'</div>

    <buttoning-click="copyToAnotherModel()">Use in Controller</button>

    <input type="text"ng-model="anotherModel"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>

It's a simple sample, but if you apply it and devise the model itself, you can bind objects that can hold Date and return string expressions.

For example, in the link of the directive, rewrite the return statement in ngModel.$parsers.push as follows:

return{
    value —value,
    toString: function() {return dateFilter(value, 'HH:mm:ss')}
  };

If you want to support other formats, you can use attributes to specify the format, and if you use Directive, you won't have a problem of increasing the number of directives every time the format increases.

2022-09-30 20:32

Moment.js
http://momentjs.com/

I think the recipient will use this library to get plastic surgery.
There are other uses, so it's convenient.

2022-09-30 20:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656