如何將ng模型的日期綁定到HTML 5日期輸入？

-1

我想從我的模型日期綁定到HTML 5日期輸入這樣的：如何將ng模型的日期綁定到HTML 5日期輸入？

<input type="date" ng-model="data.employeeCase.initialConsultDate" />

屬性看起來像這樣在我的JSON：

"initialConsultDate": "2017-04-20T04:00:00",

我能得到它的設置通過硬編碼是這樣的：

<input type="date" value="2017-04-20">

如何設置我喜歡用從我的模型中的價值和使用NG-模型綁定呢？

更新1： 下面的答案1爲我工作。

我只是想顯示我的執行情況，以防有人遇到問題。

/***** Get Employee Case By ID *****/ 
    $scope.getEmployeeCase = function (caseId) { 
     //console.log("In GetEmployeeCase"); 
     //console.log(caseUrl + '/' + caseId); 
     $http.get(caseUrl + '/' + caseId) 
      .then(function (response) { 
       // Test front end exception message; 
       // throw "test exception"; 
       $scope.data.employeeCase = response.data; 

       var date = new Date(response.data.initialConsultDate); 
       $scope.sanitizedInitialConsultDate = $filter('date')(date, "yyyy-MM-dd") 
           }) 
      .catch(function (error) { 
       $scope.data.caseDetailError = error; 
       $scope.data.error = error; 
      }); 
    } 

<th>Intitial Consult Date:</th> 
    <td> 
     <input type="date" ng-value="sanitizedInitialConsultDate" ng-model="data.employeeCase.initialConsultDate" /> 
    </td>

來源

2017-04-14 Sam

你按照那個角度介紹錯誤消息的建議嗎？ https://docs.angularjs.org/error/ngModel/datefmt?p0=2017-04-20T04:00:00。換句話說，'initialConsultDate'必須是'Date'，而不是'string'。 – Claies

從json中取出日期字符串並創建一個new Date()。然後，使用Angular的$filter服務來格式化您認爲合適的日期。

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $filter) { 

var json = { 
    initialConsultDate: "2017-04-20T04:00:00" 
}; 

var date = new Date(json.initialConsultDate); 

$scope.date = $filter('date')(date, "yyyy-MM-dd"); 


});

然後，使用ng-value設置您輸入的日期：

<input type="date" ng-value="date">

演示在這裏：http://plnkr.co/edit/UEcWvpyO1df4SXhvdNla?p=preview

來源

2017-04-14 23:47:50 couzzi

工程就像一個魅力:)謝謝。 – Sam

如何將ng模型的日期綁定到HTML 5日期輸入？

回答

相關問題