Question

我有这两个日期选择器：

<div class="form-group" ng-controller="datepickerpopupCtrl">

            <label>Start date:</label>
            <p class="input-group">
                <input ng-model="task.startdate" name="startdate" type="text" class="form-control"
                       uib-datepicker-popup="{{format}}"
                       datepicker-options="options"
                       is-open="opened"
                       ng-required="true"
                       close-text="Close"
                       alt-input-formats="altInputFormats"
                       show-button-bar="false"
                       placeholder="startdate" />
                <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open()"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                     </span>
            </p>
        </div>
        <div class="form-group" ng-controller="datepickerpopupCtrl">

            <label>End date:</label>
            <p class="input-group">
                <input ng-model="task.enddate" name="enddate" type="text" class="form-control"
                       uib-datepicker-popup="{{format}}"
                       datepicker-options="optionsEndDate"
                       is-open="opened"
                       ng-required="true"
                       close-text="Close"
                       alt-input-formats="altInputFormats"
                       show-button-bar="false"
                       placeholder="Date de fin"

               />
                <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open()"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                     </span>
            </p>
        </div>

我希望enddate（第二个datePicker）受到第一个日期startdate的限制。

现在我试过这个：

 function datepickerpopupCtrl($scope) {

    $scope.dt = new Date();
    $scope.open = open;
    $scope.opened = false;
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];
    $scope.options = {
        showWeeks: false,
        minDate : new Date(),
        startDate : new Date()
    };
    $scope.optionsEndDate = {
        showWeeks: false,
        minDate : ($scope.task.startdate == undefined) ? new Date() : $scope.task.dateDebut,
        startDate : new Date()
    };
    function open() {
        $scope.opened = true;
    }
}

}）

但它不起作用。

任何建议都会表示赞赏。谢谢

Answer 1

您需要设置$watch。它无法工作的原因是因为您在控制器初始化时为第二个日期选择器设置了minDate。最初，$scope.task.startdate未定义，因此minDate由于您的三元运营商而被分配new Date()。故事结局。

无论您如何更改$scope.task.startdate的值，都为时已晚，因为您已将minDate设置为new Date()，而您对$scope.task.startdate所做的任何更改都无效

因此，处理此问题的最佳方法是先将minDate设置为new Date()，然后在$scope.task.startdate上设置监视：

$scope.optionsEndDate = {
  showWeeks: false,
  minDate : new Date(),
  startDate : new Date()
};

$scope.$watch('task.startdate', function(newValue) {
  $scope.optionsEndDate.minDate = (newValue == undefined) ? new Date() : newValue;
});

或者，您可以选择将minDate指定为$scope.task.startdate，如果您不关心它何时未定义：

$scope.optionsEndDate = {
  showWeeks: false,
  minDate : $scope.task.startdate,
  startDate : new Date()
};

顺便问一下，$scope.dateDebut到底是什么？我只在你的代码中出现一次。这是一个错字吗？

第一个日期是第二个日期的minDate

1 个答案: