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 ...
随机推荐
- 数学之路-python计算实战(19)-机器视觉-卷积滤波
filter2D Convolves an image with the kernel. C++: void filter2D(InputArray src, OutputArray dst, int ...
- WIP jobs available to MRP
1. Supply 2. Demand 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- UILabel iOS添加文本控件
UILabel这是iOS控制,这是UIView子类,只有在UIView文字显示功能的基础上加入.UILabel还查看课程和UIView类别似 //1.创建一个视图对象 //2.配置视图 ...
- Net分布式系统
Net分布式系统 Net分布式系统之三:Keepalived+LVS+Nginx负载均衡之高可用 摘要: 上一篇写了nginx负载均衡,此篇实现高可用(HA).系统整体设计是采用Nginx做负载均衡, ...
- Lua 与C 交换 第一篇
编译 windows上编译lua源代码 cl /MD /O2 /W3 /c /DLUA_BUILD_AS_DLL *.c del *.o ren lua.obj lua.o ren luac.obj ...
- Socket编程实践(12) --UDP编程基础
UDP特点 无连接,面向数据报(基于消息,不会粘包)的传输数据服务; 不可靠(可能会丢包, 乱序, 反复), 但因此普通情况下UDP更加高效; UDP客户/服务器模型 UDP-API使用 #inclu ...
- 深入了解HTTP协议、HTTP协议原则
ttp协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写. 它的发展是万维网协会(World Wide Web C ...
- maven 打包 时出现非法字符: /65279错误
maven 打包 时出现非法字符: /65279错误 碰到的一个问题: 使用下面的命令给工程打包时, maven mvn clean package -Ptest01 -Dmaven.test.ski ...
- Error: ORA-16501: the Data Guard broker operation failed ORA-16625: cannot reach database
在备库上建配置文件 DGMGRL> create configuration 'sharkdbbork' as primary database is 'sharkdb' connect ide ...
- Gradle 多渠道打包的使用和错误分析(转)
刚接触到android的开发,对什么都陌生的,本文是自己在项目中使用的技术要点总结,大咖遇到可直接飘过..... 1.Gradle 打包(不废话了直接来脚本),将下列脚本放到build.gradle文 ...