Ariel Sabbadini Ariel Sabbadini - 3 months ago 12
AngularJS Question

datetimepicker is not displaying calendar using NgRoute of AngularJs

I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.

index.html

<!DOCTYPE html>
<html ng-app="mainApp">

<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>

<li> <a href="#/datePicker"> Date Picker</a> </li>

<div ng-app="mainApp">
<ng-view></ng-view>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>

</html>


main.jsp

(function() {
"use strict";

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

mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});

mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {

//$('#datepicker1').datepicker();

}]);

})();


DatePicker.html

<!DOCTYPE html>
<html ng-app="mainApp">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>

<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>

<body>

<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
<a href="#/index"> Main menu</a>
</form>
</body>

</html>


http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j

I will appreciate any help on this issue.

Thank you so much,
Ariel.

Answer

in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:

<script>
     $(function() {
        $( "#datepicker1" ).datepicker();
     });
</script>

<form>
   <p>Fecha: <input id="datepicker1" type="text" ></p>
   <a href="#/index"> Main menu</a>
</form>

And this will go inside index.html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>

I dont know if it will sove your problem, but it is the correct thing to do...