CODEWITHSUNDEEP
angularjstwitter-bootstrapdatepickerangular-ui-bootstrap
valmarv
valmarv

Reputation: 894

Angular UI Bootstrap monthpicker

I am trying to setup the date picker to work as a month picker. Everything works as expected as long as you're clicking a month and/or going to prev/next year. However, if you want to broaden the year selection by clicking the current year from the top, 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 the JSFiddle demonstrating it (angularjs 1.2.26, ui-bootstrap 0.11.2).

Upvotes: 6

Views: 3684

Answers (2)

valmarv
valmarv

Reputation: 894

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

$scope.datepickerMode = 'month';

and then use it as an attribute:

datepicker-mode="datepickerMode"

Upvotes: 2

Rohit Aggarwal
Rohit Aggarwal

Reputation: 650

Make the following changes as highlighted in 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'
    };
}]);

})();

Upvotes: 2

Related Questions