最近使用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. IL来理解属性

    IL来理解属性   阅读目录 概述: C#中如何定义一个属性 Student类 属性Name Main方法 实现get,set方法 性能 访问权限 回到最开始提出的问题 参考资料 .Net底层剖析目录 ...

  2. SQLServer2012 分页语句执行分析

    上一篇文章提到了,SQLServer2012在使用Offset,Fetch语句分页时,获取了大量不需要的数据,导致查询效率低的问题. 现在让我们来看看,究竟是什么导致SQLServer不能按需取数呢? ...

  3. IOS开发笔记 - 基于wsdl2objc调用webservice

    为了方便在ios下调用webserivce,找来了wsdl2objc这样一个开源的框架来解析webservice方便在ios下引用. 下面做个小例子. 1.首先是用Asp.net搭建一个测试的webs ...

  4. WPF中不规则窗体与WebBrowser控件的兼容问题解决办法

    原文:WPF中不规则窗体与WebBrowser控件的兼容问题解决办法 引言 这几天受委托开发一个网络电视项目,要求初步先使用内嵌网页形式实现视频播放和选单,以后再考虑将网页中的所有功能整合进桌面程序. ...

  5. 关于多线程的一个例子(UI实时显示)

    在开发Window应用程序的时候,经常需要在界面上显示出已经执行到什么步骤了,拿一个简单例子来说,创建一个Winform程序,在窗体上访一个Button和一个Label,点击Button时做100次循 ...

  6. Codeforces Round#310 div2

    C题:这题说的是套娃,如果做题的时候知道是套娃,那就好理解多了 规则1:套娃A可以放到套娃B里面,当且仅当套娃B没有放在其他套娃里面 规则2:套娃A放在套娃B里面,且套娃B没有放在其他套娃里面,那么可 ...

  7. CSDN的SDCC大会(2013)中使用的PPT分享

    SDCC大会今天开完个.呵呵~ PPT下载链接在最后面,对内幕不感兴趣的可以直接无视下面的种种啰嗦直接“嗖”到最后. 这里说说这个大会中我的Topic. 此前CSDN向我约了一个主题,我回复说, 我可 ...

  8. 三星Samsung 4.4.2该负责人制度,简化名单

    installed uninstalled AccessControl.apk AllshareControlShare.apk AirMotionTryActually.apk AllshareFi ...

  9. J2SE基础:4.面向对象的特性一

    面向对象的特性 封装 继承多态 封装: 定义: 通过对象的封装,实现了模块化和信息隐藏. 通过对类的成员施以一定的訪问权限,实现了类中成员 的信息隐藏 注意点: 对象自已该做的一些事情与方法不能交与其 ...

  10. datagrid标题头粗体

    //标题头粗体        //$("#R_datagrid .datagrid-header-row td div span").each(function (i, th) { ...