功能

Question

根据文档输入[时间]：https://docs.angularjs.org/api/ng/input/input%5Btime%5D

它应该足以使用输入类型时间并将其绑定到日期对象，但它不能像我期望的那样工作。

<input ng-model="time" type="time" placeholder="HH:mm" min="08:00" max="17:00" required >

和

$scope.time = new Date();

结果我想在输入字段中看到HH：mm。

这是一个可以解决的问题：

http://jsfiddle.net/U3pVM/7314/

Answer 1

我认为你至少需要 Angular 1.3.0 beta 来实现这一点，因为它看起来就像当时推出的那样。

Changelog：

...

功能

输入：支持类型日期，时间，日期时间 - 本地，月份，周   （46bd6dc8，#5864）
  ....

Answer 2

你可以实现这一点，按照我的代码， http://plnkr.co/edit/60aiH0eJ8ee0FlEsQE2m?p=info

基本上我使用momentjs，并将秒和毫秒设置为零，这样浏览器就不会渲染它。

moment().second(0).milliseconds(0).toDate();

Answer 3

以下是如何在angularJS中使用input =“time”并使用ng-model指令绑定它的示例

HTML：<input type="time" ng-model="myTime"/>

在控制器中，我们分配时间来自数据库到目前为止的新对象

$scope.myTime = new Date(response.data.start_time);

这会将完整日期解析为时间HH：MM：SS成功

Answer 4

将代码中的$scope.time = new Date();更改为：

var d = new Date();
$scope.time = d.getHours() + ':' + d.getMinutes();

工作代码：http://jsfiddle.net/bitsmith/asjv8ycq/1/

Answer 5

AngularJS元素指令输入[时间]用于创建具有时间验证和转换的HTML时间输入。

输入必须以ISO-8601格式提供，即本地时间格式HH：mm：ss，例如15:35:10

数据模型必须是Date对象，用于读取/写入Date实例的时区是使用ngModel定义的语法

 <input type="time"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

使用以下代码绑定时间并获取与输入类型时间相关的其他属性。

    <!doctype html>
<html lang="en">
<head>
  <title>AngularJS Directives : input[time]</title>
   <script src="angular.js"></script>
   <style>
      b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;} 
  </style>
</head>
<body ng-app="timeDemo">
  <script>
 angular.module('timeDemo', [])
   .controller('timeController', ['$scope', function($scope) {
     $scope.sample = {
       value: new Date(1999, 0, 1, 15, 30, 0)
     };
   }]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
   <label for="sampleInput">Select a time from 6 am to 6 pm</label>
   <input type="time" id="sampleInput" name="input" ng-model="sample.value"
       placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
  <!-- min 6 am and max 6 pm i.e 18:00 -->
   <div role="alert">
     <span class="error" ng-show="demoForm.input.$error.required">
        Input is Required!</span>
     <!-- Required Error  -->
     <span class="error" ng-show="demoForm.input.$error.time">
       Input Date is  not Valid!</span>
    <!-- Validation Error -->
     
   </div>
  <i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
  <i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
  <i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
  <i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
  <i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>

Answer 6

下面将确保您的输入始终采用HH：mm格式。

$scope.time = return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 
  date.getHours(), date.getMinutes());

此外，可以在控制器端编写一个函数，以格式化要在时间输入中输入的所有Date值。

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(), date.getSeconds(), date.getMilliseconds());
 }
}

使用angular.js输入类型时间

6 个答案:

功能