jQuery ui datepicker with Angularjs

Question

I want to use jQuery UI datepicker with AngularJS    I have a sample   but my code is not working   Sample   http   www abequar net jquery-ui-datepicker-with-angularjs   My Code    lt input id  sDate  name  programStartDate  type  text  datepicker required  gt     angular module  elnApp     directive  datepicker   function        return       restrict   A       require    ngModel       link   function  scope  element  attrs  ngModelCtrl              function                element datepicker                   dateFormat  yy-mm-dd                   onSelect function  date                        ngModelCtrl  setViewValue date                       scope  apply                                                                 It shows an error TypeError  Object  object Object  has no method  datepicker

User · Answer

I have almost exactly the same code as you and mine works.

Do you have jQueryUI.js included in the page?

There's a fiddle here

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}


var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', 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();
                }
            });
        }
    };
});

You'll also need the ng-app="app" somewhere in your HTML

User · Answer

angular module  elnApp    directive  jqdatepicker   function         return           restrict   A           require   ngModel           link  function scope  element  attrs  ctrl                  element  datepicker                   dateFormat   dd mm yy                   onSelect  function date                        ctrl  setViewValue date                       ctrl  render                        scope  apply

User · Answer

I think you are missing the Angular ui bootstrap dependency in your module declaration  like this   angular module  elnApp     ui bootstrap      See the doc for Angular-ui-bootstrap

User · Answer

You main Index html file for Angular can use the body tag as the ng-view  Then all you need to do is include a script tag at the bottom of whatever page is being pulled into Index html by Angular like so    lt script type  text javascript  gt     function              mydatepickerid    datepicker  changeMonth  true  changeYear  true           yearRange   1930   new Date   getFullYear    dateFormat   yy-mm-dd          lt  script gt    Why overcomplicate things

User · Answer

myModule directive  jqdatepicker   function          return           restrict   A           require   ngModel            link  function  scope  element  attrs  ngModelCtrl                element datepicker                   dateFormat   dd mm yy                   onSelect  function  date                           var ar date split                           date new Date ar 2   -  ar 1   -  ar 0                        ngModelCtrl  setViewValue date getTime                           scope course launchDate   date                      scope  apply                                                              HTML Code     lt input type  text  jqdatepicker  ng-model  course launchDate  required readonly   gt

User · Answer

I had the same problem and it was solved by putting the references and includes in that order    lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jqueryui 1 9 1 jquery-ui min js  gt  lt  script gt   lt link href  http   code jquery com ui 1 10 3 themes redmond jquery-ui css  rel  stylesheet   gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt     x000D   x000D  var datePicker   angular module  app        x000D   x000D  datePicker directive  jqdatepicker   function      x000D      return   x000D          restrict   A   x000D          require   ngModel   x000D           link  function  scope  element  attrs  ngModelCtrl    x000D              element datepicker   x000D                  dateFormat   dd mm yy   x000D                  onSelect  function  date    x000D                      scope date   date  x000D                      scope  apply    x000D                    x000D                  x000D            x000D         x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   ajax googleapis com ajax libs jqueryui 1 9 1 jquery-ui min js  gt  lt  script gt  x000D   lt link href  http   code jquery com ui 1 10 3 themes redmond jquery-ui css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt  x000D   x000D   lt body ng-app  app  gt  x000D   lt input type  text  ng-model  date  jqdatepicker   gt  x000D   lt br  gt  x000D     date    x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Unfortunately  vicont s answer did not work for me  so I searched for another solution which is as elegant and works for nested attributes in the ng-model as well  It uses  parse and accesses the ng-model through the attrs in the linking function instead of requiring it   myApp directive  myDatepicker   function   parse        return function  scope  element  attrs  controller          var ngModel    parse attrs ngModel           function            element datepicker                               onSelect function  dateText  inst                    scope  apply function scope                          Change binded variable                     ngModel assign scope  dateText                                                                       Source  ANGULAR JS BINDING TO JQUERY UI  DATEPICKER EXAMPLE

User · Answer

I finally was able to run datepicker directive in angular js   here are pointers   include following JS in order   jquery js jquery-ui js angular-min js   I added the following    lt script src  http   code jquery com jquery-1 10 2 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 4 jquery-ui js  gt  lt  script gt    lt script src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt   lt  script gt          in html code   lt body ng-app  myApp  ng-controller  myController  gt     some other html code   lt input type  text  ng-model  date  mydatepicker   gt   lt br  gt      date       some other html code   lt  body gt    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      TRY THIS INSTEAD in angular js      lt script src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt      along with jquery js and jquery-ui js  we can implement angular js datepicker as    lt input type  date  ng-model  date  name  DOB  gt    This gives the built in datepicker and date is set in ng-model and can be used for further processing and validation   Found this after lot of successful headbanging with previous approach

User · Answer

var selectDate   element datepicker       dateFormat  dd mm yy       onSelect function  date            ngModelCtrl  setViewValue date           scope  apply             on  changeDate   function ev        selectDate hide        ngModelCtrl  setViewValue element val         scope  apply

User · Answer

onSelect doesn t work well in ng-repeat  so I made another version using event bind  html   lt tr ng-repeat  product in products  gt   lt td gt       lt input type  text  ng-model  product startDate  class  form-control date-picker  data-date-format  yyyy-mm-dd  datepicker  gt   lt  td gt   lt  tr gt    script  angular module  app       directive  datepicker   function          return           restrict   A           require   ngModel           link  function  scope  element  attrs  ngModelCtrl                element datepicker                element bind  blur keyup change   function                    var model   attrs ngModel                  if  model indexOf       gt  -1  scope model replace                 model replace                   element val                    else scope model    element val

User · Answer

Here is my code-  var datePicker   angular module  appointmentApp         datePicker directive  datepicker   function          return           restrict   A           require   ngModel            link  function  scope  element  attrs  ngModelCtrl                  element  datepicker                   dateFormat   dd-mm-yy                   onSelect  function  date                        scope appoitmentScheduleDate   date                      scope  apply

User · Answer

I modified the code and wrapped view update inside  apply     link  function  scope  elem  attrs  ngModelCtrl      var updateModel   function dateText          call  apply to update the model     scope  apply function            ngModelCtrl  setViewValue dateText              var options         dateFormat   dd mm yy           handle jquery date change     onSelect  function dateText           updateModel dateText                jqueryfy the element elem datepicker options        working fiddle - http   jsfiddle net hsfid SrDV2 1 embedded result

User · Answer

As a best practice  especially if you have multiple date pickers  you should not hardcode the element s scope variable name   Instead  you should get the clicked input s ng-model and update its corresponding scope variable inside the onSelect method   app directive  jqdatepicker   function         return           restrict   A           require   ngModel           link  function scope  element  attrs  ngModelCtrl                  element  datepicker                   dateFormat   yy-mm-dd                    onSelect  function date                        var ngModelName   this attributes  ng-model   value                          if value for the specified ngModel is a property of                         another object on the scope                     if  ngModelName indexOf         -1                            var objAttributes   ngModelName split                               var lastAttribute   objAttributes pop                            var partialObjString   objAttributes join                               var partialObj   eval  scope     partialObjString                            partialObj lastAttribute    date                                               if value for the specified ngModel is directly on the scope                     else                           scope ngModelName    date                                            scope  apply                                                              EDIT  To address the issue that  Romain raised up  Nested Elements   I have modified my answer

[jquery] jQuery ui datepicker with Angularjs

Examples related to jquery

Examples related to jquery-ui

Examples related to angularjs