在 Angularjs 日期选择器中禁用特定日期答案

【问题标题】：Disable specific dates in Angularjs date picker在 Angularjs 日期选择器中禁用特定日期
【发布时间】：2014-05-15 06:58:52
【问题描述】：

我想在 AngularJS 的日期选择器中禁用特定日期。

我正在使用AngularJS-bootstrap css 作为组件。

我要禁用的日期将根据组合中先前值的选择动态变化。

我相信date-disabled="disabled(date, mode)" 应该可以工作，但不确定。

我该怎么做？

【问题讨论】：

您好！您是否发现有关动态禁用特定日期的任何信息（例如，如果您有活动列表，则选择另一个活动，然后禁用日历上的某个日期，因为这些天该活动没有任何内容）？谢谢！

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

我假设您正在使用来自 Angular-UI 的 Datepicker 指令。 date-disabled 属性允许您禁用某些日期（例如周末）。看到这个笨蛋http://plnkr.co/edit/gGAU0L?p=preview

如果要根据选择动态禁用日期，可以使用min 和max 属性和观察者。见http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview

参考资料：

http://angular-ui.github.io/bootstrap/#/datepicker

【讨论】：

我可以根据选择只禁用几个日期吗？

【解决方案2】：

注意，到目前为止，在 AngularUI Bootstrap 的较新版本（从 1.1.0 开始）中，您必须使用 datepicker-options 属性来禁用日期以及诸如最大/最小日期之类的操作。

在html控件中，添加

datepicker-options="vm.dateOptions"

或datepicker-options="dateOptions"，如果您不直接使用controller as，而是直接使用$scope。

然后在您的控制器中，定义 dateOptions 对象。

    vm.dateOptions = {
        maxDate: new Date(),
        dateDisabled: myDisabledDates
    };  

    function myDisabledDates(dateAndMode) {
        return ( dateAndMode.mode === 'day' && ( dateAndMode.date.getDay() === 0 || dateAndMode.date.getDay() === 6 ) );
    }

!!!注意!!! dateDisabled 的函数签名已更改。以前它接受一个日期对象和一个模式字符串。在较新的版本中，它是一个包含两者的包装对象。

【讨论】：