I'm trying to get a datepicker to work with AngularJS. I'm using jQuery, jQueryUI, Bootstrap and AngularJS in my project. I tried the jQuery UI datepicker but that doesn't seem to work well (not at all) with Angular and it's scope.
I tried many things and my project is probably getting messy adding and removing stuff. I've seen many working examples and I can't figure out what I'm doing wrong in my project. I'm pretty new to Angular, it's the first time I'm using it in a project.
Currently I'm trying to get an angular-ui / bootstrap datepicker to work I found here: http://angular-ui.github.io/bootstrap/
The following is included, in the same order, in the head section. I left out the tags for a better reading, I can guarantee that everything is loaded just fine.
// CSS files
css/bootstrap-custom.min.css
css/myOwnStylesheet.css
css/jquery-ui.css
// JS files
js/jquery.js
js/jquery-ui.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_nl-nl.js <- I need this for language specific things, like currency format
js/bootstrap.min.js
js/ui-bootstrap-custom-tpls-0.12.1.js <- I also tried without the tpls
js/myApp.js <- where I start my Angular app
js/ui-datepicker.js <- some code I copy pasted and edited from http://angular-ui.github.io/bootstrap/
I will also post some content of the to my problem important files.
myApp.js
var myApp = angular.module('myApp',['ui.bootstrap']);
ui-datepicker.js (tried a few variations already)
angular.module('myApp').controller('DatepickerController', ['$scope', function ($scope) {
// … lots of stuff here, copy pasted from my source (http://angular-ui.github.io/bootstrap/) and not edited
}]);
ui-bootstrap-custom-tpls-0.12.1.js
angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.datepicker","ui.bootstrap.dateparser","ui.bootstrap.position"]);
angular.module("ui.bootstrap.tpls", ["template/datepicker/datepicker.html","template/datepicker/day.html","template/datepicker/month.html","template/datepicker/popup.html","template/datepicker/year.html"]);
angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position'])
// … some other untouched code ...
Now for the HTML, I have a ng-app=”myApp” in the html-tag. A working controller (if I don't add the following ng-controller → ) and a ng-controller=”DatepickerController” which gives the following error:
Argument 'DatepickerController' is not a function, got undefined
I hope someone can tell me what I'm doing wrong, my project depends on it!
