disable past dates and to-date duration to three month

Question

I have created an application for getting a calendar using angularjs, I have used angular-bootstrap-datetimepicker plugin for achieving that. The application is working fine but the issue is that I want to disable all the pass dates apart from the current date as well as only three months should be enabled starting from the current date.

Is there any feature like start date and end date for this plugin

Can anyone please help me on this

My working demo is shown in the JSFiddle

Html

<div ng-app="myApp">
    <div ng-controller="AppCtrl">Selected Date: {{ data.embeddedDate | date:'yyyy-MM-dd a' }}
        <datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day' }" />
    </div>
</div>

Script

var app = angular.module('myApp', ['ui.bootstrap.datetimepicker']);
app.controller('AppCtrl', function ($scope) {
});

Answer 1

There is a 'before-render' callback that will execute on every render of the datepicker, giving you a range of DateObject s appearing the current view. One of the properties of the DateObject is selectable . Setting that controls if the date can be chosen.

For your scenario it is very easy to implement:

$scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
        var threeMonthsLater = moment().add(3, 'months');
        for(var index=0;index<$dates.length;index++) {
            $dates[index].selectable = moment($dates[index].utcDateValue).isBetween(moment(),threeMonthsLater);            
        }
    }

Use version of moment.js greater than 2.9 for isBetween support. This library is required for the datepicker anyway.

Working fiddle