How to replace deprecated uib-datepicker-popup?

mickro picture mickro · Mar 29, 2016 · Viewed 15.8k times · Source

Since I updated my project to "angular-bootstrap": "~1.2.4", I've a warning in the console:

uib-datepicker settings via uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead

uib-datepicker-popup is filled by a date format or an array of date formats:

  • uib-datepicker-popup="dd-MMMM-yyyy" in my case

So in angular bootstrap documentation it is still shown the deprecated way to handle this case.

Does anyone know how to migrate to the new version?

Answer

McGiogen picture McGiogen · Mar 30, 2016

They have not deprecated the attribute "uib-datepicker-popup", the warning is related to all attributes listed in datepicker docs in section "Datepicker Settings". You have to provide those values by the attribute "datepicker-options". Don't know why but those in section "Popup Settings" are not throwing the warning.

In my case I had

JS

$scope.datepicker.format = 'shortDate';
$scope.datepicker.options = {
    formatYear: 'yy',
    startingDay: 1
};

HTML

<input type="text" class="form-control" 
     ng-model="ngModel"
     uib-datepicker-popup="{{ datepicker.format }}"
     datepicker-options="datepicker.options"

     datepicker-append-to-body="true" 
     is-open="datepicker.opened"               
     show-button-bar="false"
     close-text="Close"

     min-date="minDate"
     max-date="maxDate"
     custom-class="getCustomClass"
     show-weeks="false"
     />

and it became

JS

$scope.datepicker.format = 'shortDate';
$scope.datepicker.options = {
    formatYear: 'yy',
    startingDay: 1,
    minDate: minDate,
    maxDate: maxDate,
    showWeeks: false,
    customClass: getCustomClass
};

HTML

<input type="text" class="form-control" 
     ng-model="ngModel"
     uib-datepicker-popup="{{ datepicker.format }}"
     datepicker-options="datepicker.options"

     datepicker-append-to-body="true" 
     is-open="datepicker.opened"               
     show-button-bar="false"
     close-text="Close" 
     />


Update

plunker reproduction