将日期添加到日期输入字段Angular答案

【问题标题】：Adding date to a date input field Angular将日期添加到日期输入字段Angular
【发布时间】：2016-05-11 10:38:05
【问题描述】：

我在这个 JSFiddle 中简化了一些逻辑：http://jsfiddle.net/r7vyjg4h/ 并且有效。

html:

<div ng-controller="MyCtrl">
<div ng-repeat="line in lines">
    <div style="display: inline-block">
      {{line.id}}
    </div>
    <div style="display: inline-block">
      <input type="text" ng-model="line.date" />
    </div>
  </div>
  <input type="button" ng-click="update()" value="update" />
</div>

js:

function MyCtrl($scope) {
    $scope.lines = [{
        id:"1",
        date: new Date()
      },{
        id:"2",
        date: new Date()
      },{
        id:"3",
        date: new Date()
      }
      ];
      var newDates = [{id:"1", date: new Date('10-10-2010 10:10:10')}, {id:"3", date: new Date('11-11-2011 11:11:11')}];

      $scope.update = function(){
        for(var i = 0; i < newDates.length;i++){
            for(var j = 0; j < $scope.lines.length; j++){
              if($scope.lines[j].id == newDates[i].id){
                  $scope.lines[j].date = newDates[i].date;
              }
            }
          }
      }

它的作用是从网络请求中挑选一些日期，并应该将其添加到 ng-repeat 中的正确框中。到目前为止，它仍然是正确的。

但是当我将输入类型从 text 更改为 date 时，什么也没有发生。我选择的值是正确的，但日期元素没有更新。

http://jsfiddle.net/vd347sfa/

我在这里缺少什么？难道我做错了什么？

【问题讨论】：

标签： javascript angularjs html input

【解决方案1】：

HTML-5 日期输入规范依赖于 RFC3339 第 5.6 节，该节指定了等于 yyyy-MM-dd 的日期格式。（注意：这正是您运行 jsfiddle 时控制台中的错误消息）。您只需提供正确格式的日期字符串：http://jsfiddle.net/yxkvm0zm/1/

【讨论】：

顺便说一句：Google's Quick FAQs on input[type=date] in Chrome 明确指出“以编程方式设置 input.value 时，无论初始值和 JavaScript 注入值的表示格式如何，该值都只接受 yyyy-mm-dd 样式” . （我前段时间自己绊倒了......）。

【解决方案2】：

它没有反映在日期输入字段中的原因是因为格式。

日期输入字段正在寻找mm/dd/yyyy 格式，而您正在以这种格式提供10-10-2010 10:10:10。

您可以使用该函数将日期转换为toISOString() 格式，它应该可以解决问题。

你去看看这个解决方案：

 var newDates = [{id:"1", date: new Date('10-10-2010 10:00:00').toISOString().substring(0, 10)},{id:"2", date: new Date('10-10-2010 11:00:00').toISOString().substring(0, 10)}, {id:"3", date: new Date('11-11-2011 12:00:00').toISOString().substring(0, 10)}];

http://jsfiddle.net/vd347sfa/3/

【讨论】：

【解决方案3】：

您需要以正确的格式提供日期和时间。正确的做法是：

var newDates = [{id:"1", date: new Date('2010', '10', '10', '10', '10', '10')}, 
{id:"3", date: new Date('2011', '11', '11', '11','11','11')}];

格式为：

new Date('yyyy', 'mm', 'dd', 'hh', 'mm', 'ss');

【讨论】：