Angularjs datetimepicker not working on partial html view

Question

I am trying to use this jQuery Plugin Date and Time Picker in my Angularjs project to receive date from a user in a form.

<html>
<head>
    <title>Datetime picker</title>
    <link href="bootstrap.min.css" rel="stylesheet" >
    <link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <form>
           <input type="text" id="datetimepicker" class="form-control">
        </form>
    </div>

    <script src="jquery-3.1.1.min.js" ></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.datetimepicker.full.js"></script>

</body>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker();
</script>
</html>

So, when I click on the form, the datetime widget appears quite alright. At this point I have not used any Angularjs.

Now I want to do this with Angularjs and this is the attempt I've so far made:

<html ng-app="myApp">
<head>
    <title>Datetime picker</title>
    <link href="bootstrap.min.css" rel="stylesheet" >
    <link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>

    <div class="container" ng-view></div>

    <script src="angular.min.js" ></script>
    <script src="ngRoute.js" ></script>
    <script src="app.js" ></script>
    <script src="jquery-3.1.1.min.js" ></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.datetimepicker.full.js"></script>

</body>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker();
</script>
</html>

here is my app.js file:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
    $routeProvider
        .when('/datetime', {
            templateUrl: 'admin/date.html',
            controller:  'DateTimeController'
        })
        .otherwise({
            redirectTo: "/"
        });
});

myApp.controller('DateTimeController', ["$scope", function($scope){

}]);

according to my routes, when I get /datetime in the url, the date.html partial is rendered; Here is the code for the date.html partial:

<div ng-controller="DateTimeController">
    <input type="text" id="datetimepicker" class="form-control">
</div>

When I did this, I expected the date/time widget to appear but it didn't. So I began searching for solutions. The best solution I found suggested that I use angular directives. According to this solution, I made the following changes:

I created a custom directive date-time and here is the code in my app.js file:

// ...

myApp.directive('dateTime', function () {
   return {
    template:'<input type="text" id="datetimepicker" class="form-control">',
    restrict: 'E',
    link: function (scope, element, attr) {
       $('#datetimepicker').datetimepicker();
    }
  };
});

and the date.html partial now looked like this:

<div ng-controller="DateTimeController">
    <date-time></date-time>
</div>

At this point I was confident that it will work but it didn't.

What am I doing wrong? Is there a better way of doing this? Thanks for any help.

From what I recall, you can't use Angular with JQuery, am I wrong ? — user4676340
– user4676340, Commented Nov 17, 2016 at 13:55
You could use it if you need. there is an angular wrapper called jqlite and if you use jquery you should do it in a directive because it modifies the dom — M B
– M B, Commented Nov 17, 2016 at 13:58

Larry Turtis · Accepted Answer · 2016-11-17 14:36:55Z

1

Hard to say exactly what is wrong because there seem to be multiple iterations of your code here, and it's not clear how all of them have changed over time. Having said that, there's no reason that this shouldn't work-- it's working fine for me in this Plunker. You should be able to take a look and see what you're doing differently.

var app = angular.module('plunker', ["ngRoute"]);

app.config(function($routeProvider){
    $routeProvider
        .when('/datetime', {
            templateUrl: 'date.html',
            controller:  'DateTimeController'
        })
        .otherwise({
            redirectTo: "/"
        });
});

app.directive('dateTime', function () {
   return {
    template:'<input type="text" id="datetimepicker" class="form-control">',
    restrict: 'E',
    link: function (scope, element, attr) {
       $('#datetimepicker').datetimepicker();
    }
  };
});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.controller('DateTimeController', function() {
});

answered Nov 17, 2016 at 14:36

Larry Turtis

1,91614 silver badges26 bronze badges

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

1 Comment

Awa Melvine Over a year ago

I found the solution. It was a silly mistake on my part. For the purpose of testing, I had duplicated the input field <input type="text" id="datetimepicker" class="form-control"> and so I had two ids on the same page and that's why it wasn't working. I removed one of the ids and its now working. Thanks very much for your contribution.

Collectives™ on Stack Overflow

Angularjs datetimepicker not working on partial html view

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related