Angular UI Bootstrap monthpicker

时间:2014-10-20 12:59:06

标签: angularjs twitter-bootstrap datepicker angular-ui-bootstrap

我正在尝试将日期选择器设置为月份选择器。只要您点击一个月和/或上一个/明年,一切都按预期工作。但是,如果您想通过单击顶部的当前年份来扩大年份选择,我会收到JavaScript错误。

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'
        };
    }]);
})();

这里有JSFiddle演示它(angularjs 1.2.26,ui-bootstrap 0.11.2)。

2 个答案:

答案 0 :(得分:2)

在评论中突出显示以下更改:

 (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'
    };
}]);

})();

答案 1 :(得分:2)

原来你需要在控制器中明确定义datepicker模式:

$scope.datepickerMode = 'month';

然后将其用作属性:

datepicker-mode="datepickerMode"