Angularjs simple datepicker using controller as not $scope

Question

I am trying to use the angular-ui bootstrap for dateranges.

http://angular-ui.github.io/bootstrap/#/datepicker

The link contains some good examples. However I want to use controller as syntax and not the scope as it shows in the link above.

I have attempted it as seen below. But its not showing the calendar box when its clicked on. Its not returning any errors either so im a bit lost as to what I need to do. I think my example is close.

Here is my attempt on fiddle

Code snippets below..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div class="input-group">

          <input type="text" 
            class="form-control date" 
            id="dateFrom" 
            placeholder="From" 
            ng-click="demo.open($event)"   
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtFrom" 
            is-open="demo.dateFrom" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >


          <input type="text" 
            class="form-control date" 
            id="dateTo"   
            placeholder="To" 
            ng-click="demo.open($event)"  
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtTo" 
            is-open="demo.dateTo" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >

      </div>

  </div>

</div>
</body>

If you see code clearly example from bootstrap is also using controller itself...with in controller they are using scope directive. angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { — khanz
– khanz, Commented Jan 27, 2015 at 14:23
I am trying to do it without the scope directive using the newer controller as way. — Robbo_UK
– Robbo_UK, Commented Jan 27, 2015 at 15:46

rmuller · Accepted Answer · 2015-01-29 18:55:00Z

6

+50

The problem here seems to be that since UI Bootstrap 0.11.0 they have removed the "open on focus". (see source)

The plunkr below shows one possible workaround using ng-click to open the date picker.

change your current ng-click from the dateFrom input to:

ng-click="demo.dateFrom=true"

and the input field for dateTo to:

ng-click="demo.dateTo=true"

Plunkr - Working Bootstrap Date-picker

The source below shows several other workarounds if you are looking for a solution which opens the date picker on focus, rather than using ng-click.

Source: UI Bootstrap Github

answered Jan 29, 2015 at 18:55

rmuller

1,83712 silver badges12 bronze badges

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

1 Comment

Robbo_UK Over a year ago

Thanks this works :-). I will award the bounty there is a time delay left of 5 hours before i can do it.

Collectives™ on Stack Overflow

Angularjs simple datepicker using controller as not $scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related