最近项目上了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] 11.8 The Rank of Number 数的排行

    11.8 Imagine you are reading in a stream of integers. Periodically, you wish to be able to look up t ...

  2. 20145222黄亚奇《Java程序设计》第4周学习总结

    教材学习内容总结 第6章 为了避免重复的行为定义使用继承. 要学会如何正确判断使用继承的时机以及继承之后如何活用多态. 继承的好处之一,就是若你要将name.lexel.blood改为其他名称,那就只 ...

  3. spark能否取代Hadoop?

    大数据的浪潮风靡全球的时候,Spark火了.在国外 Yahoo!.Twitter.Intel.Amazon.Cloudera 等公司率先应用并推广 Spark 技术,在国内阿里巴巴.百度.淘宝.腾讯. ...

  4. c# 6.0新特性（二）

    写在前面 上篇文章介绍了c#6.0的using static,Auto Property Initializers,Index Initializers新的特性,这篇文章将把剩下的几个学习一下. 原文 ...

  5. Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识

    目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...

  6. 四则运算 Day1

    需求分析 1.N(Need,需求) 该软件用户只有一类角色:小学生 要求能根据用户选择的算法(+-/),产生随机数(在0--10之间的整数)进行该算法的计算,程序能接收用户输入的答案,如果用户输入的为 ...

  7. [Windows 64] （搬运）价值￥ 6,499的软件Navicat Premium11.2.11 最新版及其注册机

    Navicat Premium可以连接6种数据库并开发> 转载于:http://www.52pojie.cn/thread-529020-1-1.html

  8. navjs

    'use strict';define([ 'jquery'], function($) { var nav = { init : function() { $("#burger-menu& ...

  9. MVC2 Area实现网站多级目录

    Areas是ASP.NET Mvc 2.0版本中引入的众多新特性之一,它可以帮你把一个较大型的Web项目分成若干组成部分,即Area.实现Area的功能可以有两个组织形式: 在1个ASP.NET Mv ...

  10. maven_项目的依赖、聚合、继承

      一.假设目前有三个maven项目,分别是project.A.project.B.project.C 要求B依赖A.C依赖B但不依赖C 1.B添加对A的依赖 1 2 3 4 5 <depend ...