angular datepicker bootstrap-ui doesent work in view

Question

I use Bootstrap components written in pure AngularJS by the AngularUI Team http://angular-ui.github.io/bootstrap/

Problem is that inside view datepicker won't work correctly. so in view I have code below:

<input type="text" 
       datepicker-popup="{{format}}" 
       ng-model="datepicker"
       show-weeks="fasle" 
       is-open="opened"
 />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

in controller I try to show date picker by clicking on button:

scope.open = function(){
   timeout(function() {
    scope.opened = true;
   });
};

in scope.opened store true! but nothing happend;

Second problem I try to retrieve date from date picker. When I initialize it I use next:

scope.datepicker = new Date();
scope.format = "dd-MM-yyyy";

and retrieve

scope.save = function() {
 console.log(scope.datepicker);
};

date picker always return current date...

BUT out side view everything works perfect! Why?

EDIT

this is live demo

Try to change date and click save. OR try to call dapicker clicking by button

Maxim Shoustin · Accepted Answer · 2013-11-23 18:54:09Z

4

add controller to routeProvider:

angular.module('plunker', ['ui.bootstrap'])
  .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'template.html',
                controller: 'DatepickerDemoCtrl'
            })
    });

Demo Plunker

HTML

<div class="form-horizontal">
        <input type="text" 
          datepicker-popup="dd-MMMM-yyyy" 
          ng-model="dt" is-open="opened" 
          min="minDate"
          max="'2015-06-22'" 
          datepicker-options="dateOptions" 
          date-disabled="disabled(date, mode)" 
          ng-required="true"
          />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>

JS

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {

  $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;
  };



  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function() {
    $timeout(function() {
      $scope.opened = true;
    });
  };

  $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
  };
};

edited Nov 23, 2013 at 18:54

answered Nov 23, 2013 at 17:58

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

4 Comments

JSX Over a year ago

Thx for your answer, but in my case I work with gn-view. and load template using routing.

JSX Over a year ago

add live demo to bottom of my question

Maxim Shoustin Over a year ago

add controller to routeProvider, fixed your Plunker and edit my answer

JSX Over a year ago

this sounds like a solution. But, in this case controller will be loaded twice. plnkr.co/edit/4t72GWWszIBCtzwJzQYj. Best solution is to seperate logic in deffrent files? load controller only in config of router, no in header of html? P.S. But without additing controller to route I have access to scope of this controller why?

Collectives™ on Stack Overflow

angular datepicker bootstrap-ui doesent work in view

BUT out side view everything works perfect! Why?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

BUT out side view everything works perfect! Why?

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related