2
votes

I m trying to include some angular bootstrap stuff (v1.3.2 with angular 1.4.1) and having some troubles with the uib-datepicker directive

Here's my template :

<div>
  <pre>Selected date is: <em>{{calendar.dt | date:'fullDate' }}</em></pre>

  <h4>Inline</h4>
  <div style="display:inline-block; min-height:290px;">
    <uib-datepicker ng-model="calendar.dt" class="well well-sm" datepicker-options="calendar.options"></uib-datepicker>
  </div>

  <hr />
  <button type="button" class="btn btn-sm btn-default" ng-click="calendar.setDate(2009, 7, 24)">2009-08-24</button>
  <button type="button" class="btn btn-sm btn-danger" ng-click="calendar.clear()">Clear</button>
  <button type="button" class="btn btn-sm btn-default" ng-click="calendar.toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>

The controller concerned :

export default class CalendarController {
  constructor() {
    'ngInject';

    this.dt = new Date();
    this.options = {
      minDate: new Date(),
      showWeeks: true
    };
  }


  toggleMin() {
    this.options.minDate = this.options.minDate ? null : new Date();
  }

  clear() {
    this.dt = null;
  }

  setDate(year, month, day) {
    this.dt = new Date(year, month, day);
  }
}

I have put the 'ui.bootstrap' in the angular modules.

Actually, the box that has to render the calendar displays this instead of the datepicker :

enter image description here

Important : I have no errors on the console, neither on the gulp task in background...