最近项目上了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. 接收content-type:multipart/form-data类型的参数

    一.问题描述 最近在写接口程序,该接口需要与其他公司的程序对接.对方发送content-type:multipart/form-data类型的参数,结果通过request.getParameter(p ...

  2. 学习笔记——Maven实战（二）POM重构之增还是删

    重构是广大开发者再熟悉不过的技术,在Martin Fowler的<重构——改善既有代码的设计>一书中,其定义为“重构(名词):对软件内部结构的一种调整,目的是在不改变软件之可察行为前提下, ...

  3. ASP Request.ServerVariables 参数集

    转自:http://blog.csdn.net/chinmo/article/details/2096871 Request.ServerVariables("Url") 返回服务 ...

  4. 数据库防火墙如何防范SQL注入行为

    SQL注入是当前针对数据库安全进行外部攻击的一种常见手段.现有主流应用大多基于B/S架构开发,SQL注入的攻击方式正是利用web层和通讯层的缺陷对数据库进行外部恶意攻击.将SQL命令巧妙的插入通讯的交 ...

  5. Object C学习笔记23-继承,重写,重载

    前面的学习都一直在使用Object C对象,但是没有具体总结过Object C中的对象使用特性,这里简单总结一下. 一.  继承 在面向对象编程中,子类可以通过继承得到父类的可以继承的的属性和方法,在 ...

  6. [代码片段]javascript检查图片大小和格式

    function checkImgType(input) { var this_ = document.getElementsByName('imgFile')[0]; var filepath = ...

  7. PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数

    一.中文截取:mb_substr() mb_substr( $str, $start, $length, $encoding ) $str,需要截断的字符串 $start,截断开始处,起始处为0 $l ...

  8. 常用js正则

    selectedName = selectedName.replace(/,$/, '');//去除尾部字符串 selectedCode = selectedCode.replace(/,$/, '' ...

  9. 消灭textarea中的神秘空格

    之前在做页面的时候经常发现写的textarea中会有一些默认的空格出现,鼠标可以在里面任意点击.这个问题折腾了好久,后来发现,原来是<textarea></textarea>标 ...

  10. JSP基本原理

    JSP的基本原理: jsp的本质是servlet.jsp通过在标准的HTML页面中嵌入java代码,其静态的部分无需Java程序控制,只有那些需要从数据库读取或需要 动态生成的的页面内容,才使用Jav ...