2016-12-05 2 views
2

in AngularJS 1.5私は入力フィールドが "time"のフォームを持っています。表示される時間は秒でなくHH:mmでなければなりません。フォーマット入力フィールド "time"は秒数とミリ秒を表示しません

Chromeはデフォルトでこれを実行しますが、FirefoxとInternet Explorerは秒数とミリ秒で表示されます(例: "14:56:00.000" 14:56 ")。

すべてのブラウザで必要な時刻形式を表示するにはどうすればよいですか?

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-time-input-directive-production</title> 
 
    
 
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 
    
 
</head> 
 
<body ng-app="timeExample"> 
 
    <script> 
 
angular.module('timeExample', []) 
 
    .controller('DateController', ['$scope', function($scope) { 
 
    $scope.example = { 
 
     value: new Date(1970, 0, 1, 14, 56) 
 
    }; 
 
    }]); 
 
</script> 
 
<form name="myForm" ng-controller="DateController as dateCtrl"> 
 
    <label for="exampleInput">Pick a time between 8am and 5pm:</label> 
 
    <input type="time" id="exampleInput" name="input" ng-model="example.value" 
 
     placeholder="HH:mm" min="08:00" max="17:00" required /> 
 
    <div role="alert"> 
 
    <span class="error" ng-show="myForm.input.$error.required"> 
 
     Required!</span> 
 
    <span class="error" ng-show="myForm.input.$error.time"> 
 
     Not a valid date!</span> 
 
    </div> 
 
    <tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/> 
 
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> 
 
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> 
 
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> 
 
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> 
 
</form> 
 
</body> 
 
</html>

ありがとうございます!

+0

あなたは正しいです。しかし、私は、テキストフィールドではなく、入力フィールドの日付フォーマットを意味します。誤解して申し訳ありません。 – user2145393

+0

便利なリンクがいくつか追加されました –

答えて

2

FirefoxとIEは<input type="time">をサポートしていません。ブラウザによって異なります。 W3の詳細については、thisリンクを参照してください。入力欄ではChromeと同じ方法で表示することができません。

代替がangular-uiからuib-timepickerを使用するかwebshimなどのjqueryから1を試してみることです。

0

日付時刻入力タイプは、IE11およびSafariではサポートされていません。しかし、この「can_i_use」リンクを頻繁に訪れて、何か変わったかどうかを確認してください。

https://caniuse.com/#feat=input-datetime