CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrap
Elan Hasson
Elan Hasson

Reputation: 1270

Year Picker in popup with angular-ui bootstrap

I'm trying to have a year picker using the angular-ui Bootstrap datepicker directive.

It works when it is inline, but not in the popup. Setting the options via datepicker-options doesn't matter for the popup.

See this Plunker: http://plnkr.co/edit/GRqSTCE7hOP6ZbBY3dZd

Why does this datepicker:

Inline year picker works

<datepicker ng-model="dt"    datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false" class="well well-sm"></datepicker>

behave differently than this:

popup year picker doesn't work

<input type="text" class="form-control" ng-model="dt" 
         datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false"
    datepicker-popup="{{format}}"  is-open="opened" ng-focus="open($event)"
          date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

What am I missing?

Upvotes: 2

Views: 13630

Answers (1)

wilson0x4d
wilson0x4d

Reputation: 8749

You have to use 'datepicker-options' attribute to pass in the options, rather than the element attributes. Consider the following: http://plnkr.co/edit/FJRsvwnjitOUsGor8ZRb?p=preview

<input type="text" class="form-control" ng-model="dt" 
       datepicker-popup="{{format}}" datepicker-options="{{datepickerOptions}}"
       is-open="opened" ng-focus="open($event)"
      date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
</input>

and

$scope.datepickerOptions = {
    datepickerMode:"'year'",
    minMode:"'year'",
    minDate:"minDate",
    showWeeks:"false",
 };

Upvotes: 7

Related Questions