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

时间:2016-05-11 10:38:05

标签: javascript angularjs html5 input

我有一些逻辑,我在这个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;
              }
            }
          }
      }

它的作用是从Web请求中选择一些日期,并且应该将它添加到ng-repeat中的右侧框中。到目前为止,它仍然是正确的。

但是当我将输入类型从文本更改为日期时,没有任何反应。我选择的值是正确的,但日期元素不会更新。

http://jsfiddle.net/vd347sfa/

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

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

日期输入字段正在查找格式AdventureWorks2012,并且您以此格式提供mm/dd/yyyy

您可以使用该功能将日期转换为10-10-2010 10:10:10格式,它应该可以解决问题。

你去看看这个解决方案:

toISOString()

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

答案 2 :(得分:0)

您需要以适当的格式提供日期和时间。正确的方法是:

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');