最近项目上了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. [C++] 如何查看DLL有哪些函数

    Visual Studio里面自带了一个工具 dumpbin. 打开VS的command line,输入dumpbin可以查看帮助. 我们查看导出函数的话,使用选项/EXPORTS. 如果函数太多,可 ...

  2. AutoTest简介

    前言(仅看介绍本身的可以略过) 在离职后的一段时间里,个人总结了过去几年工作的心得,结合以往的工作经验.重新思考并重构了前些年做的一些东西(主要是测试相关),产生了设计AutoTest这样的一个测试工 ...

  3. 从走出校门到Java实习生生活

    序 男,95年,这个学期就大四了,非计算机专业(数字媒体).目前在二线城市做Java实习生,待遇一般,应该算一个正常的实习生水平吧:租的一个约10平米的小单间,实习工资-衣食住行-杂七杂八的小消费差不 ...

  4. 《1024伐木累》-te别篇，庭审你知道吗？

    思前想后,我觉得不应该发这一期,因为,做完这一期之后突然发觉,自己失去了主题,到底是在讽刺?还是在讽刺?还是在讽刺呢?不论是什么,大家自己判断吧.就当作者不想发表自己的观点,先看这一期的对白吧! 1. ...

  5. 并行程序设计模式--Master-Worker模式

    简介 Master-Worker模式是常用的并行设计模式.它的核心思想是,系统有两个进程协议工作:Master进程和Worker进程.Master进程负责接收和分配任务,Worker进程负责处理子任务 ...

  6. javascript-XMLHttpRequest

    JS方法: var xmlhttp;//一定注意是写在外面的全局变量,我调了一个上午才发现. function verify(){ //使用dom方式获取文本框中的值 var userName=doc ...

  7. eclipse快捷键的使用及概述

    <eclipse快捷键的使用及概述> <Eclipse概述>       Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服 ...

  8. 【转】高斯消元模板 by kuangbin

    写的很好,注释很详细,很全面. 原blog地址:http://www.cnblogs.com/kuangbin/archive/2012/09/01/2667044.html #include< ...

  9. poj3237 树链剖分 暴力

    NEGATE a,b 将a b间的线段取反,这题应该用线段树+成段更新.我成段更新写的挫了,试了暴力修改过了(数据水). 也是简单的题目.不过要注意点和边的区别. #include<queue& ...

  10. str内部方法

    代码 #str内部功能 name=' aK am\til.L iu' age=18 num=-11 ab='#' ac=('1','2','3','4','5','6','7') print(dir( ...