禁用过去的日期和迄今为止的持续时间为三个月

时间:2015-06-12 13:42:54

标签: javascript angularjs twitter-bootstrap date bootstrap-datetimepicker

我创建了一个使用angularjs获取日历的应用程序,我使用了angular-bootstrap-datetimepicker插件来实现这一目标。该应用程序工作正常,但问题是我想要禁用除当前日期之外的所有通过日期,并且从当前日期开始只应启用三个月。

此插件的开始日期和结束日期是否有任何功能

任何人都可以帮助我

我的工作演示显示在 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>

脚本

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

1 个答案:

答案 0 :(得分:3)

有一个&#39; before-render&#39;将在datepicker的每个渲染上执行的回调,为您提供显示当前视图的DateObject范围。 DateObject的其中一个属性是selectable。设置控制是否可以选择日期。

对于您的方案,它很容易实现:

$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);            
        }
    }

isBetween支持使用大于2.9的moment.js版本。无论如何,这个库是datepicker所必需的。

工作fiddle