Angular UI Bootstrap monthpicker

Question

I am trying to set up a date picker to work as a month picker. Everything works as expected while you click the month and / or are going to the previous / next year. However, if you want to expand the year selection by clicking on the current year from above, I get a JavaScript error.

HTML:

<div ng-app="app"> <div ng-controller="TestController"> <input type="date" class="form-control" ng-model="date" datepicker-popup="MM/yyyy" is_open="date_opened" ng-focus="date_opened = true" ng-click="date_opened = true" datepicker-options="datepickerOptions"> </div> </div> 

JS:

 (function() { 'use strict'; var app = angular.module('app', [ 'ui.bootstrap' ]); app.controller('TestController', ['$scope', function($scope) { $scope.datepickerOptions = { datepickerMode: "'month'", minMode: 'month' }; }]); })(); 

Here's a JSFiddle demonstrating it (angularjs 1.2.26, ui-bootstrap 0.11.2).

Answer 1

Turns out you need to explicitly define the date picker mode in the controller:

 $scope.datepickerMode = 'month'; 

and then use it as an attribute:

 datepicker-mode="datepickerMode" 

Answer 2

Make the following changes as indicated in the comments:

  (function() { 'use strict'; var app = angular.module('app', [ 'ui.bootstrap' ]); app.controller('TestController', ['$scope', function($scope) { $scope.datepickerOptions = { datepickerMode: "month", // Remove Single quotes minMode: 'month' }; }]); 

}) ();