最近使用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格式化日期的更多相关文章

  1. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  2. angular 格式化日期

    参考:http://blog.csdn.net/zk437092645/article/details/37882191 html: <input type="text" d ...

  3. vue 添加过滤器-以格式化日期为例

    vue的filter和angular的pipe管道类似,是过滤器 官网:https://cn.vuejs.org/v2/guide/filters.html 添加格式化日期的全局过滤器 在main.j ...

  4. daterangepicker 双日历/格式化日期/日期限制minDate,maxDate

    var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...

  5. angular内置过滤器-filter

    这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...

  6. JS 仿支付宝input文本输入框放大组件

    input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...

  7. angularJS 格式化日期 转载

    angularjs中的filter(过滤器)——格式化日期的date 标签: filterangularjsdate http://blog.csdn.net/smile_panda/article/ ...

  8. fmt标签把时间戳格式化日期

    jsp页面标签格式化日期 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %> ...

  9. Java链接MySQL练习题:格式化日期、性别;避免代码注入

    一.查询人员名单,按序号 姓名 性格(男或女) 民族(某族) 生日(年月日)输出 import java.sql.*; import java.text.SimpleDateFormat; publi ...

随机推荐

  1. Amazon S3数据一致性模型

    左右Amazon S3有两种类型的数据的一致性模型的: 最后,一致性和读一致性. 有下面几种行为: 1 写一个新的object,然后開始读它.直到全部的变化都传播完(副本),你才干读到它,否则就是ke ...

  2. Java EE (13) -- 常用的基础结构模式

    • Replication    • Load balance     • Failover    • Off-load shared resources    • Forward cache • R ...

  3. Redis的字典(dict)rehash过程源代码解析

    Redis的内存存储结构是个大的字典存储,也就是我们通常说的哈希表.Redis小到能够存储几万记录的CACHE,大到能够存储几千万甚至上亿的记录(看内存而定),这充分说明Redis作为缓冲的强大.Re ...

  4. [Oracle] - 性能优化工具(4) - AWRDD

    AWRDD是用于比較两个AWR快照,从而获得不同一时候期的性能. 运行例如以下语句获得AWRDD: @?/rdbms/admin/awrddrpt.sql 2025 23 2月 2014 07:12 ...

  5. Jetty:开发指导Handlers

    Rewrite Handler RewriteHandler匹配一个基于该请求的规则集合,然后根据匹配规则的变更请求. 最常见的要求是改写URI.但不限于:规则可以被配置为重定向响应.设置cookie ...

  6. Android - 位置定位(Location)服务(Service)类的基本操作

    位置定位(Location)服务(Service)类的基本操作 本文地址: http://blog.csdn.net/caroline_wendy 定位服务(Location Service),能够确 ...

  7. app服务器

    http://heipark.iteye.com/blog/1847421http://heipark.iteye.com/blog/1847421http://wenku.baidu.com/vie ...

  8. 在html中禁用自己主动完毕

    输入框输入内容时总是显示历史输入历史记录,现禁用的方法是加入一个属性: <input type="text name="txt_xm" autocomplete=& ...

  9. qt的资源替换搜索QDir具体解释

    QDir对跨平台的文件夹操作提供了非常多的便利,为了更加方便的提供全局资源的查找,QDir提供了搜索路径替换功能,攻克了资源搜索不便的问题,也能提高文件查找的效率. QDir通过已知的路径前缀去搜索并 ...

  10. 强大的PropertyGrid

    PropertyGrid, 做工具一定要用这东西..... 把要编辑的对象看成类的话, 全部要编辑的属性就是成员 嗯嗯, 近期看了几眼Ogitor, 它对于PropertyGrid的使用就非常不错 全 ...