最近项目上了AngularJS，而原来使用的日期控件的使用方式也需要改变，于是开始了倒腾，看了官方的例子，可以使用AngularJS的directive做简单的处理，这样在html里直接使用申明的的形式即可使用了。

<!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日期控件的的简单包装的更多相关文章

  1. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  2. bootstrap日期控件（双日期、清空等问题解决）

    bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...

  3. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  4. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  5. bootstrap 日期控件常用选项

    使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...

  6. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  7. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单(转)

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  8. bootstrap 日期控件 bootstrap-datepicker

    http://www.bootcss.com/p/bootstrap-datetimepicker/

  9. bootstrap日期控件

    http://www.bootcss.com/p/bootstrap-datetimepicker/ <link href="js/b/css/bootstrap-datetimepi ...

随机推荐

  1. 在线富文本编辑器FckEditor配置（.Net Framework 3.5）

    进入FCKeditor文件夹,编辑 fckconfig.js 文件.1.上传设置  .  var _FileBrowserLanguage         = 'php' ;         // a ...

  2. [BZOJ 1797][AHOI2009]最小割（最小割关键边的判断）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1797 分析: 在残余网络中看: 对于第1问: 1.首先这个边必须是满流 2.其次这个边 ...

  3. java.lang.NoSuchFieldError: deferredExpression

    处理:遇到这个异常的时候是用jstl标签,是版本问题,由于MyEclipse添加Java EE5,其中自动包括了jstl1.2的版本,lib中又存在一个jstl1.1.2的jar包,把旧版本的删掉就可 ...

  4. Java基础-转义字符

    Java中的字符占两个字节.一些常用的转义字符: ①\r表示接受键盘输入,相当于按下了回车键: ②\n表示换行: ③\t表示制表符,相当于Table键: ④\b表示退格键,相当于Back Space键 ...

  5. 【POJ 3176】Cow Bowling

    题 Description The cows don't use actual bowling balls when they go bowling. They each take a number ...

  6. 修改mysql最大连接数的方法

    MYSQL数据库安装完成后,默认最大连接数是100,一般流量稍微大一点的论坛或网站这个连接数是远远不够的,增加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 ...

  7. 德州扑克AI WEB版

    继续之前的德州扑克话题,上次的DOS界面确实没法看,我女朋友说这是什么鬼.哈哈,估计只有自己能玩了 这两天重构了一下界面,基于web服务器和浏览器来交互. 服务器和客户端之间用websocket通信, ...

  8. 【poj1088】 滑雪

    http://poj.org/problem?id=1088 (题目链接) 题意 给出一个矩阵,任意选择一个起点,每次只能向周围4个格子中的值比当前格子小的格子移动,求最多能移动多少步. Soluti ...

  9. 【poj1962】 Corporative Network

    http://poj.org/problem?id=1962 (题目链接) 时隔多年又一次写带权并查集. 题意 n个节点,若干次询问,I x y表示从x连一条边到y,权值为|x-y|%1000:E x ...

  10. hihocoder #1270 建造基地

    传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在遥远的未来,小Hi成为了地球联邦外空间联合开发工作组的一员,前往一颗新发现的星球开发当地的重金属资源. 为了能够 ...