（如有错敬请指点，以下是我工作中遇到并且解决的问题）
需要使用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. 3. 与服务器对话：理解 HTTP 协议

    0.服务器与本地交换机制 2.详解HTtp服务 (1)与服务器对话的流程 (2)Reque 请求 (3)Response 响应 200 成功 404 没有网页 (4)Get/Post区别 get查询数 ...

  2. 局域网&广域网&Internet&计算机通信过程

    1.局域网 覆盖范围小(100m以内),自己花钱购买,自己单位来维护,带宽固定的(10M,100M,1000M) 2.Internet ISP,有自己的机房,对网民提供访问Internet连接 3.广 ...

  3. Eclipse 创建 Java 项目---Eclipse教程第08课

    打开新建 Java 项目向导 通过新建 Java 项目向导可以很容易的创建 Java 项目.打开向导的途径有: 通过点击 "File" 菜单然后选择 New > Java P ...

  4. Ubuntu设置root密码[repost]

    From: http://hi.baidu.com/busybox/item/283e7d31433db7179cc65ef3 安装完Ubuntu后在终端使用命令:su -然后输入密码,总是不正确.原 ...

  5. phpStorm9.0 +xampp+chrome php调试环境配置！

    不多说,直接上step by step: 1.xampp配置 看看我的XAMPP版本: 修改配置文件,该打开打开,该加上加上,结果如下(当前需要重新启动apache,配置才会生效): [XDebug] ...

  6. [译]12-spring依赖注入

    每个java应用程序都是由多个类协作才最终生成了终端用户所使用的系统.当编写复杂java应用程序的时,类之间应尽 可能保持独立,因为这样更容易做到代码的重用,也有利于单元测试的开展.spring的依赖 ...

  7. 哲学家就餐-同步问题解析-python

    五个哲学家吃五盘通心粉,由于通心粉很滑,所以必须要拿起左右两边的叉子才能吃到. 叉子的摆放如图所示. 那么问题来了:能为每一个哲学家写一段描述其行为的程序,保证不会出现死锁. 解法1:让他等待能够使用 ...

  8. hdu 1574 RP问题 01背包的变形

    hdu 1574 RP问题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1574 分析:01背包的变形. RP可能为负,所以这里分两种情况处理一下就好 ...

  9. CSS——（2）盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  10. 第一次使用iptables

    sudo iptables -A OUTPUT -m cgroup ! --cgroup 0x100001 -j DROP 第一次使用iptables就把电脑弄得上不了网了...... 下面这个地址讲 ...