
[code]

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

をHTMLで記述し  
コントローラー内で `$scope.tm` を記述すると、  
「Thu Jan 01 1970 15:32:00 GMT+0900 (JST)」  
といったものが取得されます。

HTML側の入力欄には 15:32:00 と入っているのに、その値を取得することが出来ません。

15:32:00のようにhh:tt:ssの書式で取得する方法を教えて下さい。

  * AngularJS 1.3.0
  * Cordova 4.1.0


CC BY-SA 3.0
2015-02-04T06:49:14.153
5926
2015-02-06T01:10:18.200
2015-02-04T12:30:13.713
30
8070
question
html monaca angularjs cordova
AngularJSで input type='time' の値から時刻部分の文字列を取得したい


Moment.js  
<http://momentjs.com/>

自分なら受け取った側でこのライブラリを使って整形しちゃうと思います。  
他にも使い道があるので便利ですよ。


CC BY-SA 3.0
2015-02-04T08:27:59.240
5937
2015-02-04T08:27:59.240
7852
5926
answer


以下のような感じでDate型で初期化すれば、それぞれ必要なパラメーターを取得できます。

[code]

    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());
[/code]


CC BY-SA 3.0
2015-02-04T09:17:48.467
5941
2015-02-04T09:17:48.467
7676
5926
answer


[AngularJS
1.3.0のドキュメント](https://code.angularjs.org/1.3.0/docs/api/ng/input/input%5Btime%5D)によれば、`[type=time]`な入力にバインドした`ng-
model`には、 `Date` オブジェクトが戻されてくるそうです。つまり「Thu Jan 01 1970 15:32:00 GMT+0900
(JST)」は既に日付オブジェクトである、ということです。

それさえ分かれば、後はいかに日付オブジェクトを求めるフォーマットの文字列にするかという問題になります。

  * Siegさんの回答のように日付オブジェクトの[標準メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)で必要な値を取得してくっつける方法  
  

    * 一番手っ取り早い
  

    * AM/PM表示など少しかしこいフォーマッティングをしたい場合には手間がかかる
  

  * Hiroyuki Ishiyamaさんの回答にあるような日付処理用ライブラリでフォーマッティングする方法  
  

    * ライブラリの導入が必要
  

    * 複雑なフォーマッティングにも対応しやすい
  

が既に出ていますので、ここではAngularJSの[日付フィルタ](https://code.angularjs.org/1.3.0/docs/api/ng/filter/date)をコントローラ内で利用する方法を挙げます:

[code]

    // $filterサービスをインジェクトします
    .controller("AppCtrl", ['$scope', '$filter', function($scope, $filter) {
        // 日付フィルタを呼び出します
        var timeString = $filter('date')($scope.tm, 'HH:mm:ss');
    }]);
    
[/code]

こちらはAngularJSだけで完結し、少しかしこいフォーマッティングもできるというメリットがあります。

[code]

    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 = typeof newValue;
        $scope.formatted = $filter('date')(newValue, 'HH:mm:ss');
      });
    }]);
[/code]

[code]

    <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>
        <pre ng-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>
[/code]


CC BY-SA 3.0
2015-02-04T12:23:43.627
5948
2015-02-04T12:23:43.627
30
5926
answer


以下のような Directive を作成して、バインドされる段階で Filter を適用すると良いと思います。  
これであれば対象が増えても負担にならないでしょう。

[code]

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

こうしておけば、html側で

[code]

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

とするだけで、すべてのモデルが`HH:mm:ss`の文字列になってバインドされます。  
（モデルが増えるたびに都度
Filterするコードを書く必要がなくなる。一方で文字型になってしまうのでDate型として頻繁に扱うにはそちら側で変換が必要になる。これについては後で解決方法を提示します。）

以下のブロックがサンプルです。

[code]

    var app = angular.module("app",[]);
    
    app.directive("timeModel", function(dateFilter){
        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){
        // コントローラのコードはデモのために書いたのみ。
        // HH:mm形式の文字を取得するためには不要。
        // 質問では、コントローラ側で取り出した値が `HH:mm:ss` でないことが課題となって
        // いたので、コントローラ側のコードを用意した。
        // ※ コントローラ自体はng-controllerで指定してるから必要
    
        $scope.anotherModel = "";
    
        $scope.typeOf = function(value){
            return (typeof value);
        }
        $scope.copyToAnotherModel = function(){
            $scope.anotherModel = $scope.tm;
        }
    })
[/code]

[code]

    <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>
    
        <button ng-click="copyToAnotherModel()">Use tm 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>
[/code]

サンプルとしてシンプルな形にしてありますが、応用してモデル自体を工夫すれば
Dateも持ちつつ文字列表現も返せるようなオブジェクトをバインドすることもできるでしょう。

例えばディレクティブのlink内、`ngModel.$parsers.push`のreturn文を以下の様に書き換えます。

[code]

    return {
        value: value ,
        toString : function(){ return dateFilter(value, 'HH:mm:ss')}
      };
    
[/code]

その他違う書式にも対応したいなら、書式を属性で指定できるようにして Directive の方で対応すれば書式が増えるたびに
Directiveが増えるという問題もおきないと思います。


CC BY-SA 3.0
2015-02-06T00:43:58.973
6030
2015-02-06T01:10:18.200
2015-02-06T01:10:18.200
728
728
5926
answer