AngularUI Datepicker动态日期禁用答案

【问题标题】：AngularUI Datepicker dynamic date disablingAngularUI Datepicker动态日期禁用
【发布时间】：2013-12-12 10:23:03
【问题描述】：

我正在使用 AngularUI 日期选择器。

我有两个相互影响的日期选择器。例如，一个是“开始日期”，另一个是“结束日期”。我不想为两个日期选择器创建验证，而是想消除无效日期的选项（即结束日期早于开始日期，反之亦然）。

有没有办法在选择日期时重新触发日期禁用属性？（重新触发OTHER datepicker的date-disabled）

我的 plunkr：我有一个开始和结束日期，正如您在打开每个日期选择器时看到的那样，您不能选择高于结束日期的开始日期，反之亦然。但是，如果我将开始日期更改为 11/21，我希望结束日期的日期选择器更新，以便 11/20 不再可点击。有没有办法做到这一点？

http://plnkr.co/edit/TgisJnSwQItDeCuIReLL?p=preview

【问题讨论】：

标签： angularjs datepicker angular-ui angular-ui-bootstrap

【解决方案1】：

可以使用 min 和 max 属性结合观察选择器的值来做到这一点。看http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview

【讨论】：

从你的 plunker 中，我发现了一个缺陷。如果我首先选择结束日期（2014 年 10 月 2 日），然后选择开始日期并单击今天（2014 年 10 月 0 日）。它允许我选择今天（10/8/2014）作为开始日期，它大于结束日期（10/2/2014）

【解决方案2】：

你真的不需要所有的 javascript。这是先前解决方案的一个分支。

http://plnkr.co/edit/kXkzCeBTlxOpOyZKfTiN

如果您有两个输入，例如

         <input id="getTSStartDateInput" ng-model="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>  
           <input id="getTSEndDateInput" ng-model="EndDate" min="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>

它将自动工作并禁用开始日期之前的任何结束日期注意 ng-model="EndDate" min="StartDate"，这就是您所需要的。

【讨论】：

【解决方案3】：

我使用了一个简单的解决方案，即在 startDate 和 endDate 中都添加 ng-change。如果 startDate 发生变化，则将 endDate 的 minDate 设置为 startDate，endDate 也是如此。希望有帮助

【讨论】：