將日期添加到日期輸入字段Angular

我有一些邏輯，我簡化了這個JSFiddle：http://jsfiddle.net/r7vyjg4h/和那個作品。將日期添加到日期輸入字段Angular

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-重複。到目前爲止它仍然是正確的。

但是，當我將輸入類型從文本更改爲日期，沒有任何反應。我挑出的值是正確的，但日期元素不會更新。

http://jsfiddle.net/vd347sfa/

缺少什麼我在這裏？難道我做錯了什麼？

來源

2016-05-11 Magic-Mouse

的HTML-5日期輸入規範依賴於RFC3339 5.6節指定的日期格式等於yyyy-MM-dd。（注意：運行jsfiddle時，這正是控制檯中的錯誤消息）。您只需提供正確格式的日期字符串：http://jsfiddle.net/yxkvm0zm/1/

來源

2016-05-11 11:04:04 user1924627

只是題外話：谷歌的'輸入快速常見問題[類型=日期]'在Chrome（https：//開頭developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome）明確指出：「以編程方式設置input.value時，該值只接受'無論初始值和JavaScript注入值的表示格式如何，yyyy-mm-dd'風格「。（前一段時間我自己絆倒了......）。 – user1924627

其在日期輸入字段中未反映的原因是因爲格式化。

日期輸入字段正在尋找格式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/

來源

2016-05-11 10:49:32

您需要以正確的格式給出日期和時間。要做到這一點，正確的做法是：

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

來源

2016-05-11 11:18:47

將日期添加到日期輸入字段Angular

回答

相關問題