JQuery DatePicker is not working in my AngularJS Partial

Question

I've started working on AngularJS while doing so I happens to use date in one of my input fields. For this I've choosen Jquery date picker. But the problem is when I use Jquery date picker independently It works properly. i.e

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Datepicker - Default functionality</title>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <script>
      $(function() {
         $( "#datepicker" ).datepicker();
      });
    </script>
 </head>
 <body> 
    <p>Date: <input type="text" id="datepicker"></p> 
 </body>
 </html>

But when I use it in one of the angular partials, It's not working. I'm confused what might have happened there. Can you help me on this?

Use UI Bootstrap angular-ui.github.io/bootstrap/#/datepicker — Dieterg
– Dieterg, Commented Jan 12, 2015 at 9:30

Cristi Berceanu · Accepted Answer · 2015-01-12 09:52:03Z

1

Dom manipulation should not exist anywhere else in Angular except directives. You need to wrap your datepicker into a directive because angular runs $compile and transcludes the element into the DOM.

Here's a sample directive:

"use strict";
angular.module("App.directives").
directive("bootstrapDatepicker", function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: "A", //<div bootstrap-datepicker></div>
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            $(element).datepicker();

            scope.$on("$destroy", function(){
                element.off();
            });
        }
    };
});

Check these out: directive guide and this

answered Jan 12, 2015 at 9:52

Cristi Berceanu

1,6931 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kishore Kumar Korada Over a year ago

In my partial I've just written <p>Date: <input type="text" id="datepicker"></p> and all dependencies required are included in Parent template.

Cristi Berceanu Over a year ago

Yes, but you should use directives for the DOM manipulation even if it's in a partial.

Janar · Accepted Answer · 2015-01-12 09:35:27Z

0

You should try calling this method

$(function() { $( "#datepicker" ).datepicker(); });

after the partial has loaded

answered Jan 12, 2015 at 9:35

Janar

2,7111 gold badge27 silver badges34 bronze badges

2 Comments

Kishore Kumar Korada Over a year ago

I did that but still the result is same

Janar Over a year ago

Are you getting any errors? You could also try using this $( "#datepicker" ) in the developer console to make sure jquery finds the field.

Collectives™ on Stack Overflow

JQuery DatePicker is not working in my AngularJS Partial

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related