Angularjs datepicker - 如何设置相互依赖的日期答案

【问题标题】：Angularjs datepicker - how to set mutually dependent datesAngularjs datepicker - 如何设置相互依赖的日期
【发布时间】：2015-01-19 08:00:11
【问题描述】：

我正在开发一项功能，该功能要求我在给定时间段内停用实体。所以，我展示了两个日期选择器：1）开始日期和 2）结束日期。

这两个日期相互依赖，其中开始日期限制了结束日期的最小日期，而结束日期限制了开始日期的最大日期。

<input type="text" ui-date="inactive.datePicker" ui-date-format="mm/dd/yy" ng-model="inactive.details.fromDate"  id="fromDate"  ng-change="error.dueDate=false"  value="inactive.details.fromDate}}"/>
<img ng-click="showFromDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >


<input type="text" ui-date="inactive.datePicker" ui-date-ormat="mm/dd/yy" ng-model="inactive.details.toDate" id="toDate"  ng-change="error.dueDate=false" value="{{inactive.details.toDate}}"/>
<img ng-click="showToDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >


$scope.showFromDatePicker = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.inactive.fromDatepicker = {
           max : $scope.inactive.details.toDate;
        }
        angular.element("#fromDate").focus();
    };

$scope.showToDatePicker = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.inactive.toDatepicker = {
           max : $scope.inactive.details.fromDate;
        }
        angular.element("#toDate").focus();
    };

但是现在这个 sn-p 并不完全正常工作。最小日期设置正确，但让我们禁用日期选择器，这样我就无法选择日期。另外，我如何在 AngularJS 中重新初始化或刷新日期选择器，就像我们在 Jquery 中所做的那样

$("#myDatepicker").datepicker("refresh");

【问题讨论】：

您使用的是哪个日期选择器？看起来不像 Angular-UI 的。他们有一个min-date 属性。
是的，但它也不起作用。

标签： angularjs datepicker

【解决方案1】：

在 angular-ui-bootstrap 0.14.3 中，我设法通过将 min 和 max 绑定到另一个模型来实现这一点。我在 datepicker 周围使用了一个包装器指令，但它不应该有任何区别：

Begin datepicker: max-date="myobject.endDate"
End datepicker: min-date="myobject.beginDate" max-date="today"

【讨论】：