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

を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
1
  • 後から検索する人が見つけやすいように、タイトルをより具体的にしてみました。質問は後からご自分で編集できますので、意図に沿わない箇所があれば、お手数ですが上書きしてしまってください。
    – ento
    Commented 2015年2月4日 12:32

4 件の回答 4

4

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

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

  • Siegさんの回答のように日付オブジェクトの標準メソッドで必要な値を取得してくっつける方法

    • 一番手っ取り早い

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

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

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

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

が既に出ていますので、ここではAngularJSの日付フィルタをコントローラ内で利用する方法を挙げます:

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

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

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');
  });
}]);
<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>

2
  • | でフィルタを使う方法が、 Angular っぽいですね。そのためにDate オブジェクトになっているのかも。 Commented 2015年2月4日 12:53
  • なるほどtype="time"を使用する事が無かったので知りませんでした。 既にDate型であればそれを利用して且つAngularJSを使用している関係上、その中で完結させた方がスマートではありますね。
    – Sieg
    Commented 2015年2月5日 0:42
2

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

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

2

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

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

こうしておけば、html側で

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

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

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

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

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

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

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

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

-1

Moment.js
http://momentjs.com/

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

2
  • マイナス票が付いてしまっていますが、回答内容としてライブラリの紹介にとどまっているためと考えられます。hh:tt:ssで整形するコード例があると、よい回答になると思います。また、AngularJSが返す値をどうMoment.jsに食べさせるべきかもポイントになりそうです。
    – ento
    Commented 2015年2月4日 11:16
  • ありがとうございます。 ここまでわかっている人に対して釈迦に説法かなと思い、あくまで参考程度にしてしまったのが問題だったみたいですね。 今後の回答の参考にしたいと思います。 Commented 2015年2月5日 0:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。