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

运行结果：

给Input type='date'赋值的更多相关文章

  1. html input type=date 赋值问题 必须yyyy-mm-dd格式

    type=date ,日期类型默认格式是yyyy-mm-dd 因此必须给该控件赋值yyyy-mm-dd格式的数据 错误的赋值 <input type="date" id=&q ...

  2. (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)

    现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...

  3. 手机端input[type=date]的时候placeholder不起作用解决方案

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

  4. 关于<input type="date">这种取值的问题 【原创】

    举例 <input type="date" id="date1"> var num = $("#date1").val(); a ...

  5. 手机端input[type=date]的placeholder不起作用

    <div class="input clearfix"> <label class="fl">起始日期</label> &l ...

  6. input type date 解决移动端显示placeholder

    在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...

  7. html5中如何去掉input type date默认

    html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...

  8. input时间表单默认样式修改（input[type="date"]）

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  9. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

随机推荐

  1. 使用泛型类简化ibatis系统架构

    jdk1.5的推出为我们带来了枚举.泛型.foreach循环.同步工具包等等好东西.其中,泛型的使用为我们的代码开发提供了很大的简便,简化了我们的代码. 1.设计思路 1)GenericDao泛型类提 ...

  2. C17K:Lying Island

    链接 题意: 有n个人,每个人可能会说: 第x个人是好人/坏人 如果第x个人是好人/坏人,则第y个人是好人/坏人 思路: 状压dp,首先每个人所说的人只能是他前面10个人,所以对于第i个人记录下,他前 ...

  3. laravel5.5服务提供器

    目录 1. 编写服务提供器 1.1 注册方法 register 1.1.1 简单绑定 1.1.2 绑定单例 1.1.3 绑定实例 1.1.4 绑定初始数据 1.2 引导方法 boot 2. 注册服务提 ...

  4. Visual Studio Emulator for Android 折腾记

    想用虚拟机调试Android项目,于是想到了MS免费提供的 Visual Studio Emulator for Android,这玩意价格免费量又足,N久之前试用过,速度杠杠的! 安装包很小,不到4 ...

  5. 《Cracking the Coding Interview》——第18章：难题——题目11

    2014-04-29 04:30 题目:给定一个由‘0’或者‘1’构成的二维数组,找出一个四条边全部由‘1’构成的正方形(矩形中间可以有‘0’),使得矩形面积最大. 解法:用动态规划思想,记录二维数组 ...

  6. 《Cracking the Coding Interview》——第14章：Java——题目1

    2014-04-26 18:20 题目:从继承的角度,把构造函数设成private有什么意义? 解法:就不能继承了.单体模式里也这么干,目的是为了不让使用者自主生成对象,进行限制. 代码: // 14 ...

  7. javascript将分,秒,毫秒转换为xx天xx小时xx秒（任何语言通用，最通俗易懂）

    // 传入参数为总分钟数,如果为秒数,毫秒数,需要对 // 此处得到总秒数 注释部分的代码调整下. function toDateDMS(minutes){ // 将分钟转换为 天,时,分,秒 if( ...

  8. 自动using和Layout

    一.自动using 1. Model  文件夹添加 Person类,在view文件夹下web.config文件,将namespace加入,cshtml文件就不需要添加@model引用:         ...

  9. 求：斐波那契数列的第n项

    def he (n): if n < 3 : return 1 return he(n-1)+he(n-2)print(he(n))

  10. 1079 Total Sales of Supply Chain （25 分）（树的遍历）

    给出一颗销售供应的树,树根唯一.在树根处货物的价格为p,然后从根节点开始没往结点走一层,该层的货物价格将会在父节点的价格上增加r%.给出每个叶节点的货物量求出他们的价格之和 #include<b ...