<!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" >
var datepicker1 = $( '.datepicker' ).datepicker()
.on( 'changeDate' , function (ev){
var newDate = new Date(ev.date)
datepicker1.hide()
alert(newDate)
})
.data( 'datepicker' )
var app = angular.module( 'datepickerApp' , [])
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>
|