最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angularjs datepicker popup bootstrap-ui does not work in view - Stack Overflow

programmeradmin0浏览0评论

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>
Share Improve this question edited Mar 22, 2014 at 18:52 Mega asked Mar 22, 2014 at 18:33 MegaMega 1,3447 gold badges22 silver badges43 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

The 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.

发布评论

评论列表(0)

  1. 暂无评论