I am an angularjs and bootstrap ui newbie! My date picker popup is not working in my included view. It works if its outside the view. i.e. as demoed here Any assistance will be appreciated. But, because I am using the ngRoute approach, I need to pose my view in the partial html and include in the main index.html. The inline calendar does not show and the popup calendar does not show as well. I cannot figure out the problem, but I think the date-picker.html cannot reference the script and style in my index.html. I have other included pane in the date-picker hmtl which references the scripts and css in the index.html fine. Any assistance will be appreciated. Below is the code:
**index.html**
<!doctype html>
<html lang="en" ng-app="ngdemo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Services</title>
<link rel="stylesheet" href="css/app.css"/>
<script src=".2.8/angular.js"></script>
<script src=".2.0rc1/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src=".10.0.js"></script>
<link href="//netdna.bootstrapcdn/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="menu">
<li><a href="#/date-picker"> <b> Date Management </b> </a></li>
</ul>
<div ng-view></div>
</body>
</html>
* app.js *
'use strict';
// Declare app level module which depends on filters, and services
angular.module('ngdemo', ['ngRoute','ngdemo.filters','ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/date-picker', {templateUrl: 'partials/datepicker.html', controller: 'MixedContentCtrl'});
$routeProvider.otherwise({redirectTo: '/date-picker'});
}]);
controller.js *
'use strict';
/* Controllers */
var app = angular.module('ngdemo.controllers',['ui.bootstrap']);
//Clear browser cache (in development mode)
//
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
var DatepickerDemoCtrl = function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
};
datepicker.html **
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<div class="well well-sm" ng-model="dt">
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
</div>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
<button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
I am an angularjs and bootstrap ui newbie! My date picker popup is not working in my included view. It works if its outside the view. i.e. as demoed here Any assistance will be appreciated. But, because I am using the ngRoute approach, I need to pose my view in the partial html and include in the main index.html. The inline calendar does not show and the popup calendar does not show as well. I cannot figure out the problem, but I think the date-picker.html cannot reference the script and style in my index.html. I have other included pane in the date-picker hmtl which references the scripts and css in the index.html fine. Any assistance will be appreciated. Below is the code:
**index.html**
<!doctype html>
<html lang="en" ng-app="ngdemo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Services</title>
<link rel="stylesheet" href="css/app.css"/>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="//netdna.bootstrapcdn./bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="menu">
<li><a href="#/date-picker"> <b> Date Management </b> </a></li>
</ul>
<div ng-view></div>
</body>
</html>
* app.js *
'use strict';
// Declare app level module which depends on filters, and services
angular.module('ngdemo', ['ngRoute','ngdemo.filters','ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/date-picker', {templateUrl: 'partials/datepicker.html', controller: 'MixedContentCtrl'});
$routeProvider.otherwise({redirectTo: '/date-picker'});
}]);
controller.js *
'use strict';
/* Controllers */
var app = angular.module('ngdemo.controllers',['ui.bootstrap']);
//Clear browser cache (in development mode)
//http://stackoverflow./questions/14718826/angularjs-disable-partial-caching-on-dev-machine
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
var DatepickerDemoCtrl = function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
};
datepicker.html **
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<div class="well well-sm" ng-model="dt">
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
</div>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
<button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
1 Answer
Reset to default 3The culprit lies in
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
remove that and your date picker should work, I have a plunker here that is similar to your demo code.