最近使用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. Linux 单用户模式的使用

    在进入系统启动菜单时,选择kernel,输入"e"后进入,在kernel开头的启动项后输入(空格) /single或者 / 1,然后输入"b"重新启动机器,此时 ...

  2. SE 2014年4月13日

    要求自治系统之间建立BGP邻居关系,AS 100 中由于配置疏忽R5上忘记启用BGP,从而导致了黑洞问题出现.从而需要网络工程师们就现状问题进行分析,并且使用相应技术进行完善,使得AS 400 和AS ...

  3. 队列优化和斜率优化的dp

    可以用队列优化或斜率优化的dp这一类的问题为 1D/1D一类问题 即状态数是O(n),决策数也是O(n) 单调队列优化 我们来看这样一个问题:一个含有n项的数列(n<=2000000),求出每一 ...

  4. C语言cgi(1)

    1Columbia Universitycs3157 – Advanced ProgrammingSummer 2014, Lab #2, 60ish pointsJune 9, 2014Follow ...

  5. ZOJ1093 动态规划

    给你n砖,有三个长宽高.每一个无限制的访问.叠加在一个条件的长度和宽度必须严格格长度和宽度大于下面的一个,叠加求最大高度. 思维: 每块砖终于放置在根据本方法可以把六种,然后,对于长度和宽度排序.这是 ...

  6. 每天一点儿JAVA-向量的操作

    package java_prac2; import java.util.*; /** * <p>Title: 矢量操作</p> * <p>Description: ...

  7. WCF配置文件

    因为要上传较大的图片,WCF传递数组的默认的最大数组16KB就不够了.以下讲解配置内容. 服务端配置 这里一个WCF项目中有1个服务,配置文件如下(位于system.serviceModel标签中): ...

  8. MySQL 批量Dll操作(转)

    概述 本章节介绍使用游标来批量进行表操作,包括批量添加索引.批量添加字段等.如果对存储过程.变量定义.预处理还不是很熟悉先阅读我前面写过的关于这三个概念的文章,只有先了解了这三个概念才能更好的理解这篇 ...

  9. [Windwos Phone] 实作地图缩放 MapAnimationKind 属性效果

    原文:[Windwos Phone] 实作地图缩放 MapAnimationKind 属性效果 [前言] 使用经纬度来定位地图的位置,以及使用 MapAnimationKind 属性来设定地图缩放时的 ...

  10. CentOS 安装memcached

    一,安装libevent 安装位置 /usr/lib #tar -zxvf libevent-2.0.21-stable.tar.gz # cdlibevent-2.0.21 # ./configur ...