最近使用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. MooTools,jQuery库的一些比对

    jQuery与MooTools库的一些比对   今天就我自己的一些认识比对下这两个JS框架,更多的是希望大家能够对MooTools这个JS框架有更多的认识.毕竟,大多数从事web前端的人对上手容易的j ...

  2. mysql-定时调用存储过程

    mysql定时调用存储过程,对表数据集表结构进行备份 存储过程实例: BEGIN DECLARE tname varchar(64); set @tname = CONCAT('RENAME TABL ...

  3. Akka边学边写(3)-- ByteString介绍

    Akka的IO层设计能够參考这篇文档,本文简介一下ByteString的设计. Immutable消息 Actor之间是通过消息沟通的.但为了避免同步问题,消息必须是Immutable. 因此.Akk ...

  4. Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突

    为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLay ...

  5. PopupMenu消失(Dismiss)抓住

    一.在class在implements PopupMenu该监听器类:OnDismissListener, 然后在类需要实现一个方法未实现:onDismiss(PopupMenu menu). 二.参 ...

  6. sed中求公共前缀

    string1="test toast" string2="test test" printf "%s\n%s\n" "$stri ...

  7. 【ArcGIS 10.2新特性】ArcGIS 10.2 for Desktop 新特性(一)

    ArcGIS 10.2 for Desktop是在10.1的成功基础上进行的改进,它的改进包括:性能提升.附加的安全性.40多个新的分析工具.3D功能提高.栅格增强.新的地理数据管理能力以及其它更多的 ...

  8. Ubuntu常用软件推荐,图文详细说明及下载

    抛开Windows,其实在任何一款Linux发行版本中,我们都有超级大量的软件来安装,使用.这次的教程,我就以Ubuntu为例,来给大家推荐一些我认为不错的软件 声明: 1.本文提到的全部软件,都在文 ...

  9. 新秀学习51供应链管理的----模拟笔记本PC和51串行通讯1

    说明: MCU系列文章为我们的球队文章的其他成员.发表在原创和非网络.章集中于此 原地址:http://www.eefocus.com/bbs/article_1156_541662.html 转载须 ...

  10. 王立平--android发育,转让eclipse可选颜色

    android:background="@android:color/white" 版权声明:本文博主原创文章.博客,未经同意不得转载.