jquery datepicker doesnt work when on a different embedded html file

Question

My index.html looks like this

<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
        $('dropdown-toggle').dropdown();
        $( "#datepicker" ).datepicker();
    });

The datepicker control works fine when I use it within the same index.html

<body ng-controller="nglsController">
..
<p>Date: <input type="text" id="datepicker"></p>
..
</body>

But, when it does not work when I embed a div which links an html file containing the same datepicker input type.

<body ng-controller="nglsController">
..
<div ng-include="marty"> </div>
..
</body>

The ng-include marty is initialized as a scope variable on click event. controller.js looks like this:

 $scope.martyfun = function(inp) 
 {
   $scope.marty = 'htmls/martyhtml.html';
 }

martyhtml.html looks like this:

<form>
..
<p>Date: <input type="text" id="datepicker"></p>
..
</form>

Could you please tell me whats wrong with the second way I use datepicker?

datapicker initialize function is into the martyhtml file? — Jose Rojas
– Jose Rojas, Commented Jan 2, 2018 at 14:58
You need to use a directive to initialize a plugin so you are assured the element exists at the time you run the plugin code. You should be able to easily find an angular module that will do all this for you — charlietfl
– charlietfl, Commented Jan 2, 2018 at 15:50
You can check this answer, and use a directive : stackoverflow.com/a/21681677/8175682 — khayassine
– khayassine, Commented Jan 2, 2018 at 16:41

khayassine · Accepted Answer · 2018-01-02 16:47:24Z

You can check this answer from :

jQuery ui datepicker with Angularjs

And use a directive, like this :

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();
            }

        });
    }
  };
});

Thank you - directive solution worked foe me. But do we know why the script function in index.html wouldn't work for datepicker when the same works for dropdown?
Combining Angularjs and JQuery make some weird behaviors...I don't know why its working for the dropdown but not for the datepicker. may be you can audit it on the log ?

Collectives™ on Stack Overflow

jquery datepicker doesnt work when on a different embedded html file

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related