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

hiuman

浏览: 52167 次
性别:
来自: 广州

最近访客更多访客>>

yMeng

xianxianzi08

yangxiaochenIT

jayjyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

angularjs

AngularJS

（如有错敬请指点，以下是我工作中遇到并且解决的问题）
需要使用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的代码：）