CODEWITHSUNDEEP
javascriptangularjsdatepickerangular-ui-bootstrap
Jonathan Nascimento
Jonathan Nascimento

Reputation: 145

uib-datepicker-popup with dynamic minMode

How can I set the minMode of Angular Bootstrap Datepicker dynamicly?

The only way that I got it, was with the following:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       datepicker-options="{'minMode': minMode}"/>

In Controller

...
$scope.minMode='day';

It works well, but when the minMode change and the datepicker reopen, I have a $compile:nonassignNon-Assignable error in the browser console. So I would like to do something like:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       min-mode="minMode"/>

But unfortunately, it does not work anymore.

Angular version: 1.5.9
Bootstrap version: 3.3.7
angular-bootstrap version: 1.2.5

See in Plunker

Upvotes: 1

Views: 870

Answers (1)

svarog
svarog

Reputation: 9839

You are not placing the minMode value correctly

Because you place options in your datepicker and later change these options with your buttons, you need to have that options object defined in your controller and refer to it in both places.

<div class="input-group">
    <input type="text"
        ng-model="myDate"
        is-open="showDatePicker"
        uib-datepicker-popup="mm-dd-yyyy"
        datepicker-options="options"/>
</div>

In controller

$scope.options = {'showWeeks': false, 'minMode': 'month'};

Now you can alter that minMode property using your ng-click expressions

<button ng-click="options.minMode = 'day'" class="btn">Day</button>
<button ng-click="options.minMode = 'month'" class="btn" >Month</button>

Updated plunk

Upvotes: 1

Related Questions