使用 angular.js 输入类型时间答案

【问题标题】：Input type time with angular.js使用 angular.js 输入类型时间
【发布时间】：2014-07-27 19:20:56
【问题描述】：

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

使用输入类型 time 并将其绑定到日期对象应该足够了，但是它并没有像我预期的那样工作。

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

和

$scope.time = new Date();

作为结果，我只想在输入字段中看到 HH:mm。

这是一个可以玩的 jsfiddle：

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

【问题讨论】：

使用这个github.com/randallmeeker/ps-input-time

标签： html angularjs time

【解决方案1】：

我认为您至少需要 Angular 1.3.0 beta 才能使其正常工作，因为它看起来像是当时引入的。

Changelog:

...

特点

输入：支持日期、时间、本地日期时间、月、周 (46bd6dc8, #5864)
....

【讨论】：

我尝试用最新的 beta 版本更新我的 jsfiddle，但似乎没有用 :(
@80leaves 这个应该可以。将其作为external resource 添加到左侧。 jsfiddle.net/U3pVM/7322
谢谢，但我遇到了奇怪的行为。在 Firefox 中，输入显示占位符 HH:mm，在 Chrome 中 --:--。将值更改为假设 12:00 变量 {{test}} 已正确更新，但我无法对其进行初始化。你能看到同样的行为吗？
在为我工作之前格式化您的日期：$scope.time = $filter("date")(new Date(), 'HH:mm'); jsfiddle.net/U3pVM/10464
@JulCh 您的解决方案运行良好，直到版本 1.4.5 被破坏

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这是一个如何使用 input="time" 与 angularJS 并使用 ng-model 指令绑定它的示例

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

在控制器中，我们将来自数据库的时间分配给新对象的日期

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

AngularJS 元素指令 input[time] 用于创建带有时间验证和转换的 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>

【讨论】：

【解决方案6】：

下面将确保您的输入始终具有 HH:mm 格式。

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

另外，可以在控制器端编写一个函数来格式化所有日期值，以便及时输入

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

【讨论】：