Android ChromeとWebbrowserにはまだその問題があるため、angularjsを使用してスマートフォン固有の回避策を作成しました。
http://jsfiddle.net/Rvjuf/12/
使い方:
これを処理する2つの要素があります。
<span>{{ timeDisplay }}</span>
<input type="time" ng-model="time">
リンクコードで、要素のスタイルを設定し(CSSファイルでも同様に実行できます)、スパンのクリックにバインドします。
scope.inputElement.css({
position: "absolute",
"z-index": "-10000",
opacity: 0
});
scope.displayElement.css({
width: "200px",
height: "20px",
background: "blue",
color: "white",
});
scope.displayElement.bind("click", function(event) {
scope.inputElement[0].focus();
scope.inputElement[0].click();
});
次に、時間値の変更リスナーを登録し、timeDisplay変数を更新します。
$scope.$watch('time', function(nv, ov) {
var parts = nv.split(" ")[0].split(":");
var hours = parts[0];
var minutes = parts[1];
$scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
});
そのため、ユーザーがスパンをタップすると、入力がフォーカスされるかクリックされ(iOSとANDROIDによって違いが生じます)、ネイティブのタイムピッカーUIが表示されます。