Angular UI month picker

harishr picture harishr · May 19, 2014 · Viewed 60.8k times · Source

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

lvarayut picture lvarayut · Jan 16, 2015

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.