53
rated 0 times
[
56]
[
3]
/ answers: 1 / hits: 15747
/ 10 Years ago, sat, march 22, 2014, 12:00:00
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 compose 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.com/ajax/libs/angularjs/1.2.8/angular.js></script>
<script src=https://ajax.googleapis.com/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.com/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.com/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>
More From » angularjs
