使用AngularJS给Input type=‘date‘赋值

(如有错敬请指点,以下是我工作中遇到并且解决的问题)
需要使用AngularJS动态给<input type="date" />赋值。

我使用的是ng-bind=""和ng-value="",两个都没有出现想要的效果。
就百度了一下,以下是有用的信息:

http://www.myexception.cn/javascript/2044949.html

以下两个讲的是同样的原理:
http://stackoverflow.com/questions/29519607/how-to-bind-input-type-date-with-angularjs
http://stackoverflow.com/questions/27343300/angularjs-and-input-type-date-how-to-format-model-data

然后就自己尝试以上有关代码,得出结果就是。
如果要赋值给type='date'的输入框,那么传过去的值也必须是Date对象,并且只能使用ng-model实现。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    {{dt1 | date:'yyyy-MM-dd HH:mm:ss'}}<br>
    {{dt2}}<br>
    <input type='date' ng-model='dt3'/><br>
    <input type='date' ng-model='dt4'/>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrl",["$scope", "$filter", function($scope, $filter) {

    $scope.dt1 = new Date();

    $scope.dt2 = $filter("date")($scope.dt1, "yyyy-MM-dd HH:mm:ss"); 

    var str ='2012-08-12';
    str = str.replace(/-/g,"/"); 
    var date = new Date(str );
    $scope.dt3=date;
	
    var strtwo='2016-05-09';
    strtwo = strtwo.split('-').join('/');
    var datetwo =new Date(strtwo);
    $scope.dt4 = datetwo;
}]); 
</script>
</body>
</html>



(好像提交以后,代码变了,以下是AngularJS的代码:)


运行结果:

posted @ 2016-09-29 10:37  hiuman  阅读(2776)  评论(0编辑  收藏  举报