Angularjs simple datepicker using controller as not $scope
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>
Answer
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