（如有错敬请指点，以下是我工作中遇到并且解决的问题）
需要使用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. java线程安全（单例模式）（转载）

    原文链接:http://www.jameswxx.com/java/%E8%AF%B4%E8%AF%B4%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/ 单例模式?多么简单! ...

  2. Linux下单机安装部署kafka及代码实现

    技术交流群:233513714 这几天研究了kafka的安装及使用,在网上找了很多教程但是均以失败告终,直到最后想起网络方面的问题最终才安装部署成功,下面就介绍一下kafka的安装部署及代码实现 一. ...

  3. Invalid bound statement (not found): com.up.sell.mapper.system.H5operationMapper.

    springboot + mybatis项目,出现这样的错误原因就是mapper类的名字和xml的id不对应或者是忘记写了,仔细检查一下吧

  4. CC3200串口UART1配置

    1. 首先打开工程\CC3200SDK_1.1.0\example\adc\ewarm,以ADC例程为例,修改串口引脚复用,先看下引脚图 2. 修改引脚复用代码 void PinMuxConfig(v ...

  5. WPF and Silverlight.ComboBox 如何通过 Binding IsDropDownOpen 实现下拉菜单展开

    In the WPF example the Popup and the ToggleButton (the arrow on the right) are bound with the proper ...

  6. BFC相关知识

    一.什么是BFC css布局主要采用盒子模型(BOX),元素的类型和 display 属性,决定了 Box 的类型,常见的盒子类型有两种: block-level box:display 属性为 bl ...

  7. Docker私有仓库Harbor部署与使用

    一.harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 由下面几个组件组成: proxy:nginx前端代理,主要是分发前端页面ui访问和镜像上传和下载 ...

  8. SELECTORS模块实现并发简单版FTP

    环境:windows, python 3.5功能:使用SELECTORS模块实现并发简单版FTP允许多用户并发上传下载文件 结构:ftp_client ---| bin ---| start_clie ...

  9. Oracle 遇到的问题：IMP-00041: 警告: 创建的对象带有编译警告解决办法

    出现IMP-00041: 警告: 创建的对象带有编译警告:以后再做数据迁移的时候需要额外注意,尤其用户中有视图或者触发器对象的时候.用户的环境是这样的,在库里有三个oracle的用户,其中一个用户中有 ...

  10. sql 表数据转移另一张表

     if not exists(select * from syscolumns where id=object_id('REMOTEDETECTION_2018')) begin SELECT * I ...