angular-bootstrap3-datepicker
angular-bootstrap3-datepicker copied to clipboard
benzen
angular-bootstrap3-datepicker conficts with angular-ui-bootstrap
Hi,
It seems there is a conflict between angular-bootstrap3-datepicker datepicker directive and the one present in angular-ui-bootstrap
I have created a simple test in order to show this problem:
.
├── css
│ ├── angular-bootstrap3-datepicker.css
│ └── bootstrap.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── js
│ ├── angular-bootstrap3-datepicker.js
│ ├── angular.min.js
│ ├── jquery.js
│ ├── moment.min.js
│ └── ui-bootstrap-0.11.0.min.js
├── test.html
└── test.js
test.html
<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/angular-bootstrap3-datepicker.css" />
<script src="js/jquery.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-0.11.0.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/angular-bootstrap3-datepicker.js" charset="utf-8"></script>
<script src="test.js"></script>
</head>
<body>
<div>
<div data-ng-controller="AppCtrl">
<datepicker id="date" date-format="YYYY-MM-DD"/>
</div>
</div>
</body>
</html>
test.js
app = angular.module('test', ['ui.bootstrap','ng-bootstrap3-datepicker']);
app.controller('AppCtrl', function($scope){
console.log("Controller loaded");
});
Notice that I have included ui.bootstrap as a dependency on the test
As you can see in the following image, when the page is loaded it fails with two somewhat cryptic error messages:
However, by changing the name of the directive to something else (i.e. from datepicker to datepicker2)
$ diff -ur old/ new/
diff -ur old/js/angular-bootstrap3-datepicker.js new/js/angular-bootstrap3-datepicker.js
--- old/js/angular-bootstrap3-datepicker.js 2014-06-26 11:43:16.000000000 +0200
+++ new/js/angular-bootstrap3-datepicker.js 2014-06-26 12:13:19.000000000 +0200
@@ -30,7 +30,7 @@
dp = angular.module('ng-bootstrap3-datepicker', []);
-dp.directive('datepicker', function($compile) {
+dp.directive('datepicker2', function($compile) {
return {
restrict: 'E',
replace: true,
diff -ur old/test.html new/test.html
--- old/test.html 2014-06-26 12:18:33.000000000 +0200
+++ new/test.html 2014-06-26 12:17:14.000000000 +0200
@@ -20,7 +20,7 @@
<div>
<div data-ng-controller="AppCtrl">
- <datepicker id="date" date-format="YYYY-MM-DD"/>
+ <datepicker2 id="date" date-format="YYYY-MM-DD"/>
</div>
</div>
it works like a charm:
AngularJS definitions naming collisions is a known problem and, as far as I know, the preferred way to avoid this problem is by using a namespace.
Thanks for the heads up
If there is a datepicker in the angular-ui, why do you want to use this one ? Is there some limitation that this one doesn't have ?
I just made a new version. In the new version the module and directve name was changed to ng-bs3-datepicker.
Hope this will help
Could you also update the README and the jsFiddle? Currently the demo is broken.
Sorry for the late response. Last time i tryed i couldn't find a way to use jsfiddle correctly. It seems that i couldn't fetch the dependecy in the correct order, maybe a new behavior of the site.
Could you provide a working demo?