[整理]通过AngularJS directive对bootstrap日期控件的的简单包装
2014-11-19 23:09
381 查看
最近项目上了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日期控件的的简单包装
- bootstrap/angularjs 日期控件
- 重新整理一个简单的JS日历控件
- 用于JS日期格式化,以及简单运算的Date包装工具类
- angularjs ui.bootstrap.pagination分页简单使用
- 超级简单好用的JS日期控件
- 日期控件-简单实用兼容好的js日期控件
- 超级简单好用的JS日期控件
- 为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(三)前后台交互
- 最简单的方法在DataGrid中自定义样式列(通过继承可以在Datagrid中使用下拉列表框,日期控件等)
- js jsp 时间 日期 控件 插件 简单 实用
- Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
- 有找个简单的js日期控件,大家可以试试!
- node.js开发之bootstrap日期控件(bootstrap-datetimepicker)的使用
- AngularJS directive 实现分页包装指令
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(一)环境搭建
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(二)访问数据库
- bootstrap-datepicker.js日期控件的改变,就一点,不要吐槽
- js jsp 时间 日期 控件 插件 简单 实用