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

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。它不起作用的原因是您在 Controller 初始化时为第二个日期选择器设置了 minDate 。最初，$scope.task.startdate 未定义，因此由于三元运算符，minDate 被分配为new Date()。故事结局。

无论您如何更改 $scope.task.startdate 的值，都已经太晚了，因为您已经将 minDate 设置为 new Date() 以及您对 $scope.task.startdate 所做的任何更改均无效。

因此，处理此问题的最佳方法是首先将 minDate 设置为 new Date()，然后在 $scope.task 上设置监视。开始日期:

$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到底是什么？我只在你的代码中出现一次。是不是打错了？