[整理]通过AngularJS directive对bootstrap日期控件的的简单包装
浏览数：170 /
时间：2015年06月09日
最近项目上了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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
