首页 > 代码库 > [整理]通过AngularJS directive对bootstrap日期控件的的简单包装
[整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS，而原来使用的日期控件的使用方式也需要改变，于是开始了倒腾，看来写官方的例子，可以使用AngularJS的directive做简单的处理，这样在html里直接使用申明的的形式即可使用了。
<!doctype html><html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/bootstrap/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/bootstrap-datepicker/css/datepicker3.css" /> <script src="http://www.mamicode.com/jquery/jquery-1.11.1.min.js"></script> <script src="http://www.mamicode.com/angular.js"></script> <script src="http://www.mamicode.com/bootstrap/js/bootstrap.js"></script> <script src="http://www.mamicode.com/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日期控件的的简单包装
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。