无法使用 bootstrap ui 创建 from/to 日期范围

Question

我在我的应用程序中使用 Angular UI Bootstrap 组件。

里面有两个日期。可用日期和过期日期。我希望 ExpireDate 始终大于 AvailableDate。

    var expireMinDate = new Date();
    $scope.OpenExpireDate = function() {
        $scope.expireDatePopup.opened = true;
        var newMinDate = $scope.availableDateOptions.minDate;
        $scope.expireDateOptions.minDate =  expireMinDate.setDate(newMinDate.getDate() + 1);
    };

我试过这段代码。这是行不通的。 ExpireDate 没有按照我想要的方式禁用。我没有得到禁用所有其他日子的代码。有什么问题吗？

更新：现在我正在观察 AvailableDate 并相应地更改 minDate。

$scope.$watch('AvailableDate', function() {
    var newMinParts = $scope.AvailableDate.toString().split("-");
    $scope.expireDateOptions.minDate = new Date(newMinParts[0], newMinParts[1]-1, newMinParts[2]);
});

已更新 Fiddle：https://jsfiddle.net/codeandcloud/cpu4euoj/4/

想法是更新 ExpireDate minDate 设置以反映 AvailableDate 中的更改。现在 minDate 设置已经完全消失了。

Answer 1

对于html部分

        <div class="container" ng-app="demoApp" ng-controller="demoController">
<div id="demoForm" name="demoForm" ng-form="demoForm" novalidate>
    <div class="col-md-4">
        <label class="control-label">Available Date</label>
        <div class="input-form">
            <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="AvailableDate" name="availabledate" is-open="availableDatePopup.opened" datepicker-options="availableDateOptions" ng-required="true" data-ng-change="captureChange(AvailableDate)" close-text="Close" ng-click="OpenAvailableDate()"
            placeholder="Available Date" />
            <label ng-show="showMessages && addJobForm.availabledate.$invalid" class="text-danger">
                Available Date is required.
            </label>
        </div>
    </div>
    <div class="col-md-4">
        <label class="control-label">Expire Date</label>
        <div class="input-form">
            <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="ExpireDate" name="expiredate" is-open="expireDatePopup.opened" datepicker-options="expireDateOptions" ng-required="true" close-text="Close" ng-click="OpenExpireDate()"
            placeholder="Expire Date" />
            <label ng-show="showMessages && addJobForm.expiredate.$invalid" class="text-danger">
                Expire Date is required.
            </label>
        </div>
    </div>
</div>

对于JAvascript部分

           var demoApp = angular.module('demoApp', ["ui.bootstrap"]);
          demoApp.controller("demoController", ["$scope",
function($scope) {
    var today = new Date();
    $scope.dateFormat = 'yyyy-MM-dd';
    $scope.availableDateOptions = {
        formatYear: 'yy',
        startingDay: 1,
        minDate: today,
        maxDate: new Date(2030, 5, 22)
    };
    $scope.expireDateOptions = {
        formatYear: 'yy',
        startingDay: 1,
        minDate: today,
        maxDate: new Date(2030, 5, 22)
    };
    $scope.availableDatePopup = {
        opened: false
    };
    $scope.expireDatePopup = {
        opened: false
    };
    $scope.OpenAvailableDate = function() {
        $scope.availableDatePopup.opened = true;
    };

$scope.captureChange = function(val){
    var expDate = angular.copy(val);
    expDate.setDate(expDate.getDate()+1);
    $scope.ExpireDate = expDate;
}

    var expireMinDate = new Date();
    $scope.OpenExpireDate = function() {
        $scope.expireDatePopup.opened = true;
        var newMinDate = $scope.availableDateOptions.minDate;
 if($scope.AvailableDate != undefined){
var ddnew = angular.copy($scope.AvailableDate);
    ddnew.setDate(ddnew.getDate()+1);
        $scope.expireDateOptions.minDate = ddnew;
  }
  else{
  $scope.expireDateOptions.minDate = today;
  }
    };
}]);

无法使用 bootstrap ui 创建 from/to 日期范围

Cannot create from/to date range using bootstrap ui

angularjs

angular-ui-bootstrap