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 ...
随机推荐
- Android 启动过程的底层实现
转载请标明出处: http://blog.csdn.net/yujun411522/article/details/46367787 本文出自:[yujun411522的博客] 3.1 androi ...
- 怎样用Google APIs和Google的应用系统进行集成(1)----Google APIs简介
Google的应用系统提供了非常多的应用,比方 Google广告.Google 任务,Google 日历.Google blogger,Google Plus,Google 地图等等非常的多的应用,请 ...
- C#多线程问题整合
一.跨进程访问组件 错误:线程间操作无效: 从不是创建控件“XXX”的线程访问它 解决方法: 1:把CheckForIllegalCrossThreadCalls设置为false 这个方法只是不去捕获 ...
- SVN与TortoiseSVN实战:补丁详解(转)
硬广:<SVN与TortoiseSVN实战>系列已经写了五篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...
- SWT中在treeview中显示图片
package com.repositoryclient.treeview; import org.eclipse.jface.resource.ImageDescriptor; import org ...
- 《Linux命令行与shell脚本编程大全》 第十六章 学习笔记
第十六章:创建函数 基本的脚本函数 创建函数 1.用function关键字,后面跟函数名 function name { commands } 2.函数名后面跟空圆括号,标明正在定义一个函数 name ...
- HDU 3046Pleasant sheep and big big wolf(切最小网络流)
职务地址:HDU 3046 最小割第一发!事实上也没什么发不发的. ..最小割==最大流.. 入门题,可是第一次入手最小割连入门题都全然没思路... sad..对最小割的本质还是了解的不太清楚.. 这 ...
- Unreal Engine 4 RenderTarget制作Live Camera效果
Unreal Engine 4 RenderTarget制作Live Camera效果 先上效果: Live Camera我不知道怎么翻译.反正意思就是将一个摄影机的Image渲染到一个2D平面上. ...
- VMware虚拟机上网络连接(network type)的三种模式--bridged、host-only、NAT
VMware虚拟机上网络连接(network type)的三种模式--bridged.host-only.NAT VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换 ...
- 百度mp3接口
歌曲ID 具体信息接口:http://tingapi.ting.baidu.com/v1/restserver/ting? from=android&version=2.4.0&met ...