entre entre - 1 year ago 614
AngularJS Question

Angular UI month picker

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>

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

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

But that is also not working. Please help

Answer Source

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>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download