Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
            </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

like image 326
harishr Avatar asked May 19 '14 12:05

harishr


People also ask

How disable all the dates before a particular date in angular?

To disable past and future dates, we can use min and max properties in Datepicker input text with matInput attribute. If only past dates need to be disabled, configure only min property.


2 Answers

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.

like image 197
lvarayut Avatar answered Oct 15 '22 11:10

lvarayut


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.

like image 19
Sariban D'Cl Avatar answered Oct 15 '22 11:10

Sariban D'Cl