Question

我正在开发一项功能，要求我在给定时间内停用实体。所以，我展示了两个日期选择器：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();
    };

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

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

Answer 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"

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

1 个答案: