CODEWITHSUNDEEP
angularjsdatepickerangular-ui
Tomas Romero
Tomas Romero

Reputation: 8698

Angular UI Datepicker not working

I've followed steps described here Getting Angular UI to work and here How to integrate AngularUI to AngularJS?, but can't get the datepicker to pop-up.

Note that the fiddle refenrenced in both post in the accepted answer is not working.

Any suggestions? is this gadget working on the last versions of angular-ui?

Update: My resource imports

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/directives.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script>
<script src="/assets/module.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

The module declaration:

angular.module('project', ['ngResource', 'ui.directives']);

The tag:

<input type="text" ng-model="date" ui-date/>

Upvotes: 10

Views: 27494

Answers (3)

rohit garg
rohit garg

Reputation: 133

include following JS in order

  1. jquery.js
  2. jquery-ui.js
  3. angular-min.js

I added the following 

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

in html code

<body ng-app="myApp" ng-controller="myController">
// some other html code 
<input type="text" ng-model="date" mydatepicker />
<br/>
 {{ date }}
 //some other html code
 </body>

in the js , make sure you code for the directive first and after that add the code for controller , else it will cause issues.

date picker directive :

var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
     link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'DD, d  MM, yy',
            onSelect: function (date) {
                scope.date = date;
                scope.$apply();
            }
        });
    }
  };
});

directive code referred from above answers.

After this directive , write the controller 

app.controller('myController',function($scope){
//controller code
};

Upvotes: 1

Tomas Romero
Tomas Romero

Reputation: 8698

As a workaround, until I get angular UI to work in my project I made the following directive that works:

project.directive('datepicker', function() {

  return {
    restrict: 'E',
    transclude: true,
    scope: {
      date: '='
    },
    link: function(scope, element, attrs) {
      element.datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(dateText, datepicker) {
          scope.date = dateText;
          scope.$apply();
        }
      });
    },
    template: '<input type="text" class="span2" ng-model="date"/>',
    replace: true
  }

});

and in the html:

<td><datepicker date="myDomainObj.startDate"></datepicker></td>
<td><datepicker date="myDomainObj.endDate"></datepicker></td>

Upvotes: 2

Caio Cunha
Caio Cunha

Reputation: 23394

They are missing external references (404 on both JS and CSS). So it's probably due to missing references. Here is a working example.

Keep in mind that AngularUI mainly wraps jQueryUI plugins. So you need jQueryUI before AngularUI, and jQuery before jQueryUI. And Angular itself before AngularUI. Just make sure you have the following CSSs:

  1. jQueryUI (http://jqueryui.com/)
  2. AngularUI (http://angular-ui.github.io/)
  3. Your app

And these JS files in the following order:

  1. jQuery, so you can safely load jQuery UI Plugins (Datapicker)
  2. jQueryUI, so you AngualrUI can make use of its plugin (Datepicker)
  3. Angular, so AngularUI have access to the Angular framework
  4. AngualrUI
  5. Your module declaration, referring ui.directives module.

Upvotes: 13

Related Questions