【问题标题】:disable past dates and to-date duration to three month禁用过去的日期和迄今为止的持续时间为三个月
【发布时间】:2015-06-12 13:42:53
【问题描述】:

我创建了一个使用 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) {
});

【问题讨论】:

  • 我在他们的文档中没有看到任何关于它的内容......您可能必须更改他们的来源才能使其正常工作。我将这个库与引导程序一起使用,它确实有它以及除此之外的一些不错的选择:eonasdan.github.io/bootstrap-datetimepicker
  • 我们需要改变哪些地方才能获得该功能
  • 你必须自己构建它——它似乎是 github 上的开源代码,所以你有他们的源代码,你可以分叉它。
  • @Brian 通过before-render 回调函数已经存在。看我的回答。

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


【解决方案1】:

有一个'before-render'回调将在日期选择器的每次渲染上执行,为您提供出现当前视图的DateObjects 范围。 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);            
        }
    }

使用大于 2.9 的 moment.js 版本以获得 isBetween 支持。无论如何,日期选择器都需要这个库。

工作fiddle

【讨论】:

  • 感谢您的回答,其实我也希望在日历中选择当前日期
猜你喜欢
  • 1970-01-01
  • 2013-03-06
  • 2011-04-17
  • 2020-07-02
  • 2018-08-01
  • 2014-07-04
  • 1970-01-01
  • 2011-01-26
  • 1970-01-01
相关资源
最近更新 更多