最近项目上了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. [CareerCup] 12.2 Find the Reason of Crash 找到程序崩溃的原因

    12.2 You are given the source to an application which crashes when it is run. After running it ten t ...

  2. [CareerCup] 13.9 Aligned Malloc and Free Function 写一对申请和释放内存函数

    13.9 Write an aligned malloc and free function that supports allocating memory such that the memory ...

  3. 从Lumia退役看为什么WP走向没落

    前段时间决定将自己用了三年多的Lumia 800正式退役,这是我用的时间最长的手机,虽然系统上有缺陷,但是好不妨碍他成为我最有感情的一部手机.由于之前是WinPhone 开发者的关系,这部手机是微软送 ...

  4. Win10/UWP开发—使用Cortana语音指令启动前台App

    这两天进群(53078485)找大咖的童鞋比较多,只是大咖比较忙,目前Demo还没有要到,这里先给大家转载一篇Aran大咖的博客学习下,以下是原文: Win10开发中最具有系统特色的功能点绝对少不了集 ...

  5. nodejs简易实现一下bigpipe

    今天刚好看到bigpipe的文章,写个demo试一下: nodejs的实现: var fs = require('fs'); module.exports = function(req , res){ ...

  6. Lucene 4.7 --实现搜索

    先看一段代码 IndexSearcher searcher = new IndexSearcher(DirectoryReader.open(FSDirectory.open(new File(&qu ...

  7. Java编程思想学习(十四) 枚举

    关键字enum可以将一组具名的值有限集合创建一种为新的类型,而这些具名的值可以作为常规的程序组件使用. 基本enum特性 调用enum的values()方法可以遍历enum实例,values()方法返 ...

  8. 【poj1015】 Jury Compromise

    http://poj.org/problem?id=1015 (题目链接) 题意 随机挑选n个人作为陪审团的候选人,然后再从这n个人中选m 人组成陪审团.选m人的办法是:控方和辩方会根据对候选人的喜欢 ...

  9. 网页设计师常用的PHOTOSHOP插件

    Photoshop是网页设计师常用的一个非常重要而强大的工具,可以让网页设计师的工作高效便捷的进行,也为设计师们的天马行空提供了实际技术实现.一般我们的网页设计师设计完成后,需要将其转换制作成网页形式 ...

  10. Codeforces 567D One-Dimensional Battle Ships

    传送门 D. One-Dimensional Battle Ships time limit per test 1 second memory limit per test 256 megabytes ...