<!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">
vardatepicker1 = $('.datepicker').datepicker()
.on('changeDate',function(ev){
varnewDate =newDate(ev.date)
datepicker1.hide()
alert(newDate)
})
.data('datepicker')
varapp = angular.module('datepickerApp', [])
app.directive('bsDatepicker',function(){
return{
restrict :'EA',
scope:{
model:"=ngModel"
},
link :function(scope,element,attrs,ctrl){
vardatepicker1 = $(element).datepicker()
.on('changeDate',function(ev){
varnewDate =newDate(ev.date)
datepicker1.hide()
alert(newDate)
})
.data('datepicker')
}
}
})
app.controller('datepickerController',function($scope){
varvm = $scope.vm = {
selectedDate :newDate(),
setDate :function(date){
selectedDate = date
},
clearDate :function(){
selectedDate =null
},
show :function($event){
},
hide :function(){
}
}
})
</script>
</body>
</html>
| 