本文转自:http://www.cnblogs.com/Benoly/p/4109460.html
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!doctype html> <html ng-app= "datepickerApp" >
<head>
<link type= "text/css" rel= "stylesheet" href= "bootstrap/css/bootstrap.css" />
<link type= "text/css" rel= "stylesheet" href= "bootstrap-datepicker/css/datepicker3.css" />
<script src= "jquery/jquery-1.11.1.min.js" ></script>
<script src= "angular.js" ></script>
<script src= "bootstrap/js/bootstrap.js" ></script>
<script src= "bootstrap-datepicker/js/bootstrap-datepicker.js" ></script>
</head>
<body>
<input type= "text" class = "datepicker" >
<hr>
<div ng-controller= "datepickerController" >
<input type= "text" bs-Datepicker ng-model= "vm.selectedDate" >
<button ng-click= "vm.show($event)" >Date SELECT</button>
<br>
vm.selectedDate: {{vm.selectedDate}}
</div>
<script type= "text/javascript" >
//bootstrap-datepicker
var datepicker1 = $( '.datepicker' ).datepicker()
.on( 'changeDate' , function (ev){
var newDate = new Date(ev.date)
datepicker1.hide()
alert(newDate)
})
.data( 'datepicker' )
//angular
var app = angular.module( 'datepickerApp' , [])
//angular-directive
app.directive( 'bsDatepicker' , function (){
return {
restrict : 'EA' ,
scope:{
model: "=ngModel"
},
link : function (scope,element,attrs,ctrl){
var datepicker1 = $(element).datepicker()
.on( 'changeDate' , function (ev){
var newDate = new Date(ev.date)
datepicker1.hide()
alert(newDate)
})
.data( 'datepicker' )
}
}
})
app.controller( 'datepickerController' , function ($scope){
var vm = $scope.vm = {
selectedDate : new Date(),
setDate : function (date){
selectedDate = date
},
clearDate : function (){
selectedDate = null
},
show : function ($event){
},
hide : function (){
}
}
})
</script>
</body>
</html> |
[转]通过AngularJS directive对bootstrap日期控件的的简单包装的更多相关文章
-
[整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...
-
bootstrap日期控件(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...
-
【经验】Angularjs 中使用 layDate 日期控件
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...
-
bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...
-
bootstrap 日期控件常用选项
使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...
-
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
-
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单(转)
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
-
bootstrap 日期控件 bootstrap-datepicker
http://www.bootcss.com/p/bootstrap-datetimepicker/
-
bootstrap日期控件
http://www.bootcss.com/p/bootstrap-datetimepicker/ <link href="js/b/css/bootstrap-datetimepi ...
随机推荐
-
Fragment基础----创建
1,Fragment的目的及应用场景 fragment 是3.0后引入的类,其字面翻译为“碎片”. 目的是将activity划分成许多单元再进行组合,可以根据不同分辨率屏幕,在不同状态下,灵活创建优化 ...
-
一些JavaScript的技巧、秘诀和最佳实践
文章分享一些JavaScript的技巧.秘诀和最佳实践,除了少数几个外,不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用. 本文中的示例代码,通过了在Google ...
-
浅析Linux内核调度
1.调度器的概述 多任务操作系统分为非抢占式多任务和抢占式多任务.与大多数现代操作系统一样,Linux采用的是抢占式多任务模式.这表示对CPU的占用时间由操作系统决定的,具体为操作系统中的调度器.调度 ...
-
python中关于变量名失效的案例
案例一:传参动态导入模块. selectModule = input("please input your module name") app_name = input(" ...
-
Asp.Net Core 输出 Word
In one of the ASP.NET Core projects we did in the last year, we created an OutputFormatter to provid ...
-
codeforces-707 C. Pythagorean Triples
C. Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standa ...
-
Linux进程被杀掉(OOM killer),查看系统日志
基本概念: Linux 内核有个机制叫OOM killer(Out Of Memory killer),该机制会监控那些占用内存过大,尤其是瞬间占用内存很快的进程,然后防止内存耗尽而自动把该进程杀掉. ...
-
统计--VARCHAR与NVARCHAR在统计预估上的区别
最近遇到一个问题,当查询使用到模糊查询时,由于预估返回行数过高,执行计划认为索引查找+Key Lookup的成本过高,因此采用Clustered Index Scan的方式,消耗大量逻辑IO,执行计划 ...
-
Server sent passive reply with unroutable address. Using server address instead
最近在linux服务器安装vsftp服务.经过一轮设置,终于可以连接上了,用winSCP连接,刷新目录就提示这个错误. 解决办法: vim /etc/vsftpd.conf ,编辑配置文件,最后加上 ...
-
python学习笔记:第19天 类的约束、异常、MD5和logging
目录 一.类的约束 二.异常处理: 三.MD5加密 四.日志(logging模块) 一.类的约束 真正写写项目的代码时都是多人协作的,所以有些地方需要约束程序的结构.也就是说,在分配任务之前就应该把功 ...