Is there any way to run an angularjs script when datepicker onSelect method called?
Thanks
1
-
Do you have a working example that you need help with?Ufuk Hacıoğulları– Ufuk Hacıoğulları2015-03-17 09:53:07 +00:00Commented Mar 17, 2015 at 9:53
Add a comment
|
1 Answer
Yes, of course it is possible. You could instantiate the datepicker inside the controller.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerModule">
<div ng-controller="DatePickerController">
<input id="dateField" />
</div>
</body>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerModule', [])
.controller('DatePickerController', function() {
$('#dateField').datepicker();
});
</script>
</html>EDIT: If you would like to use a directive:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerApp">
<div>
<input id="dateField" myDirective />
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerApp', [])
.directive('mydirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(function(){
element.datepicker({
onSelect: function() {
alert("Selected");
}
});
});
}
}
});
</script>
</html>