Question

在AngularJS 1.5中的

我有一个输入字段类型为“time”的表单。它有效，但显示的时间应该是HH：mm - 没有秒等等。

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>

谢谢！

Answer 1

Firefox和IE不支持<input type="time">，它取决于浏览器。有关W3的更多信息，请参阅this链接。因此，您的输入字段将无法以与Chrome相同的方式显示它。

另一种方法是使用angular-ui中的uib-timepicker或尝试jquery webshim中的Emmet: Balance (outward)。

Answer 2

尝试使用step属性并将其设置为60“。

<input type="time" id="exampleInput" name="input" ng-model="example.value"
   placeholder="HH:mm" min="08:00" max="17:00" required step="60" />

Answer 3

我们可以在控制器端编写一种通用方法，以不允许在输入类型时间中显示秒和毫秒

getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
 if (val != undefined) {
    date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 
  date.getHours(), date.getMinutes());
 }
}

将输入字段“time”格式化为不显示秒和毫秒

3 个答案: