angular input使用输入框filter格式化日期
最近使用angular日期选取器。只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳。不符合规定。需要格成一个特定的公式格公式。但input上ng-model不能直接对用于filter。因此内容需要一种方法来在这里显示格式化。
网上寻找解决方式就是写个directive,详细实例代码例如以下:
JS
angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter) {
var dateFilter = $filter('date');
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
function formatter(value) {
return dateFilter(value, 'yyyy-MM-dd'); //format
}
function parser() {
return ctrl.$modelValue;
}
ctrl.$formatters.push(formatter);
ctrl.$parsers.unshift(parser);
}
};
}]);
HTML
<input type="text" ng-model="start_date" date-format disabled="disabled">
显示效果如图。详细的格式化改动代码中的format就可以。
版权声明:本文博客原创文章。博客,未经同意,不得转载。
angular input使用输入框filter格式化日期的更多相关文章
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- angular 格式化日期
参考:http://blog.csdn.net/zk437092645/article/details/37882191 html: <input type="text" d ...
- vue 添加过滤器-以格式化日期为例
vue的filter和angular的pipe管道类似,是过滤器 官网:https://cn.vuejs.org/v2/guide/filters.html 添加格式化日期的全局过滤器 在main.j ...
- daterangepicker 双日历/格式化日期/日期限制minDate,maxDate
var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...
- angular内置过滤器-filter
这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...
- JS 仿支付宝input文本输入框放大组件
input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...
- angularJS 格式化日期 转载
angularjs中的filter(过滤器)——格式化日期的date 标签: filterangularjsdate http://blog.csdn.net/smile_panda/article/ ...
- fmt标签把时间戳格式化日期
jsp页面标签格式化日期 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %> ...
- Java链接MySQL练习题:格式化日期、性别;避免代码注入
一.查询人员名单,按序号 姓名 性格(男或女) 民族(某族) 生日(年月日)输出 import java.sql.*; import java.text.SimpleDateFormat; publi ...
随机推荐
- Entity Framework6使用SQL Server Compact免安装部署
原文:Entity Framework6使用SQL Server Compact免安装部署 使用Nuget安装以下包: EntityFramework.6.0.2 EntityFramework.Sq ...
- MySQL 模拟Oracle邻接模型树形处理
数据库对层次结构的处理模型有好多种,能够依据自己的需求来设计模型.当然最简单的也是最easy设计的模型就是所谓的邻接模型.在这方面,其它数据库比方Oracle 提供了现成的分析方法 connect b ...
- 使用 SQLNET.EXPIRE_TIME 清除僵死连接
数据库连接的客户端异常断开后,其占有的相应并没有被释放,如从v$session视图中依旧可以看到对应的session处于inactive,且对应的服务器进程也没有释放,导致资源长时间地被占用,对于这种 ...
- 关于identifier was truncated to '255' characters
学习c++过程中,遇到在VC中使用set时DEBUG模式出现的警告 identifier was truncated to '255' characters in the debug informat ...
- Python学习入门基础教程(learning Python)--2.3.1 Python传参函数设计
本节主要讨论设计传递多个参数子函数的设计方法. 在2.3节里我们讨论了如何自己设计一个带参数的子函数的设计方法,现在我们研究一下如何传递两个及以上参数的设计方法. 函数为何要带参数呢?其实原因很简单, ...
- JAVA insert() 插入字符串 reverse() 颠倒 delete()和deleteCharAt() 删除字符 replace() 替换 substring() 截取子串
insert() 插入字符串 StringBuffer insert(int index,String str) StringBuffer insert(int index,char ch) Stri ...
- php截取等长UFT8中英文混合字串
由于需要,想实现“php截取等长UFT8中英文混合字串”,可是网上找了很多代码不是有乱码就是不能实现等长(以一个中文长度为单位,两个英文字母算一个长度,如‘等长’长度为2,‘UTF8’长度也是2). ...
- 【OC加强】NSDate的使用方法——日期时间在实际开发中比較有用
(1)日期的最主要知识点就是日期转换成字符串格式化输出,相反就是依照某个格式把字符串转换成日期. (2)一般关于时区的设置非常少用到,仅仅要了解就可以. #import <Foundation/ ...
- ostringstream使用
ostringstream使用 [本文来源于]http://www.builder.com.cn/2003/0304/83250.shtml http://www.cppblog.com/alanto ...
- 0当执行游戏xc000007b错误的解决方法
如图所示,这个错误是让很多玩家担心. 出现这个错误,可能是硬件的问题,也可能是软件的问题. 可是.因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件 ...