Angular UI month picker

Question

I am trying to use angular-ui-datepicker as a month picker. But not able to configure it, tried it all. Here is the PLUNKER.

I tried to set the modes as

          <input type="text" class="form-control col-md-3" 
          datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
          ng-model="dt" is-open="opened" close-on-date-selection="true"
          datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
          show-button-bar="false" show-weeks="false"/>
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>

And also as part of: datepicker-options, using JS as

  $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1,
    'datepicker-mode':"'month'",
    'min-mode':"month"   };

But that is also not working. Please help

Answer 1

You can try multiple-month-picker

It helps you to select multiple months. It is an AngularJS widget so it should come pretty handy to you.

I've mentioned below how to implement it in your project.

HTML

<input type="text" multiple-month-picker />

JS

//Initiate your app module and inject 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys']);

As easy as that!!

Answer 2

I was still getting the same problems despite adding the above mentioned attributes. The only difference I had from @LVarayut's answer was that I had datepicker-options="date.dateOptions" attribute in the input, that was causing the DATE picker to still show up.

Removing the datepicker-options enabled the Month Picker.

Answer 3

Please find below my custom directive and html

Directive:

angular.module('myModule')
    .directive('myDatepicker', function () {
        return {
            restrict: 'E',
            replace: true,
            controller: DatePickerController,
            controllerAs: 'vm',
            scope: {
                dt: '=',
                datestyle: '@',
                datepickermode: '@',
                minmode: '@',
                mindate: '=',
                maxdate: '='
            },
            link: function (scope, $scope, $element) {

            },
            templateUrl: './datepicker.html'
        };
    })
    .controller('DatePickerController', DatePickerController);

DatePickerController.$inject = ['$scope'];

function DatePickerController($scope) {

    var vm = this;
    if ($scope.datepickermode) {
        vm.DatepickerMode = $scope.datepickermode;
    } else {
        vm.DatepickerMode = 'day';
    }

    if ($scope.minmode) {
        vm.MinMode = $scope.minmode;
    } else {
        vm.MinMode = 'day';
    }

    if ($scope.mindate) {
        vm.MinDate = new Date($scope.mindate);
    } else {
        vm.MinDate = new Date('1000/01/01');
    }

    if ($scope.maxdate) {
        vm.MaxDate = new Date($scope.maxdate);
    } else {
        vm.MaxDate = new Date('9999/12/31');
    }

    vm.dateOptions = {
        datepickerMode: vm.DatepickerMode,
        minMode: vm.MinMode,
        minDate: vm.MinDate,
        maxDate: vm.MaxDate
    };

    vm.openCalendar = function () {
        if (!$scope.dt) {
            $scope.dt = new Date(Date.now());
        }
        vm.dateOptions = {
            datepickerMode: vm.DatepickerMode,
            minMode: vm.MinMode,
            minDate: vm.MinDate,
            maxDate: vm.MaxDate
        };
        vm.popupCalendar.opened = true;
    };

    vm.popupCalendar = {
        opened: false
    };

    vm.changeValue = function () {
        vm.popupCalendar.opened = true;
    };

    vm.prev = function () {
        refreshDate(-1);
    };

    vm.next = function () {
        refreshDate(1);
    };

    function refreshDate(cnt) {
        var buf = new Date($scope.dt);
        var bufDate = buf.getDate();
        var bufMonth = buf.getMonth();
        var bufYear = buf.getFullYear();
        var changeDate;

        switch (vm.MinMode) {
            case 'day':
                bufDate = bufDate + cnt;
                changeDate = new Date(bufYear, bufMonth, bufDate);
                break;
            case 'month':
                bufMonth = bufMonth + cnt;
                changeDate = new Date(bufYear, bufMonth, '01');
                break;
            case 'year':
                bufYear = bufYear + cnt;
                changeDate = new Date(bufYear, 0, 1);
                break;
        }
        if (changeDate >= vm.MinDate && changeDate <= vm.MaxDate) {
            $scope.dt = changeDate;
        }
    }
}

Please place your respective code in datepicker.html used in the templateUrl of the directive to display the control as per your needs

My sample datepicker.html:

<a type="button" class="btn btn-default btn-black btn-sm" name="day-before" ng-click="vm.prev()"><i class="fa fa-caret-left"></i></a>
        <input type="text" uib-datepicker-popup="{{datestyle}}" ng-model="dt" class="btn btn-default btn-black btn-sm datetime-change input-day"
               is-open="vm.popupCalendar.opened" ng-required="true" ng-click="vm.openCalendar()"
               datepicker-options="vm.dateOptions" show-button-bar="false" show-weeks="false" close-on-date-selection="true" readonly />
        <a type="button" class="btn btn-default btn-black btn-sm" name="day-after" ng-click="vm.next()"><i class="fa fa-caret-right"></i></a>

My Html in the final file where i am using the contorl :

<my-datepicker dt="vm.requestDate"  //bind this to your controller
 datepickermode="month"
 minmode="month"
 datestyle="yyyy/MM"
 mindate="vm.MinDate" maxdate="vm.MaxDate"/>

On the click of the previous and next arrows, month decrements and increments respectively

Answer 4

I couldn't get this to work as a month picker either, spent hours trying different options. Wish I checked the source code earlier - turns out the input type is key.

To change it to month picker mode, change the input type to "month". This works for both pop-up and in-line variants.

Following from the example on https://angular-ui.github.io/bootstrap/ you could do this:

<input type="month" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

Answer 5

I fixed this by updating from ui-bootstrap 0.13.0 to 0.13.1. This is my markup:

<input type="text" ng-model="DOB" datepicker-popup="MM-dd-yyyy" datepicker-mode="'year'" is-open="dobOpen" ng-click="dobOpen = true" />

Answer 6

For those people who are facing this issue, I have tried a lot of things and here is the simplest method that I found:

<input type="text" class="form-control" datepicker-popup="MM/yyyy" ng-model="dt" is-open="opened" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

The trick is that you must put datepicker-options="{minMode: 'month'}" datepicker-mode="'month'" into the input tag. This worked fine for me.

Answer 7

Just write these lines:

HTML

 <datepicker ng-model="date" min-mode="month" datepicker-mode="'month'"></datepicker>

JS

$scope.date = new Date();

**Don't forget to include necessary js/css files from http://angular-ui.github.io/bootstrap/

These above code worked for me. :) I know Its too late, but it may help some one.