CODEWITHSUNDEEP
angular-uiangular-ui-bootstrap
dr.calix
dr.calix

Reputation: 727

multiple months display for angular bootstrap datepicker

Is there an option in Angular UI Bootstrap Datepicker to display multiple months? like numberOfMonths option in JQuery datepicker.

Upvotes: 5

Views: 1987

Answers (1)

alexoviedo999
alexoviedo999

Reputation: 6811

Use 2 datepickers with different models:

Here is a plunker:

<body ng-controller="MainCtrl as main">

<div ng-form class="btn-group" dropdown>

    <datepicker ng-model="main.startDate" max-date="main.endDate"></datepicker>
    <datepicker ng-model="main.endDate" min-date="main.startDate"></datepicker>

</div>
<p>{{main.startDate | date:'EEEE MMMM d'}} - {{main.endDate | date:'EEEE MMMM d'}}</p>


var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  this.startDate = new Date();
  this.endDate = new Date(this.startDate.getTime() + 7 * 24 * 60 * 60 * 1000);
});

Upvotes: 1

Related Questions