AngularUI Datepicker 禁用超出范围的日期

Question

我想将 Angular UI 日期选择器限制在作为变量传入的两个日期之间。最好我想让它在不添加像 momentjs 这样的库的情况下工作，因为这是我需要处理日期的唯一领域。

这里是这个问题的一个plunker：

http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview

变量如下：

mycurrentdate = '2016-04-18'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'
mymaxdate will be calculated from mymaxmonth to be
mymaxdate = '2016-05-31'

我的实际最大日期将是 mymaxmonth 的最后一天

$scope.maxDate = new Date(
                    $scope.mymaxmonth + (TO THE END OF THE MONTH)
                );

需要注意的一件事是运行它通过 new Date() returns 一个日期，即给定日期的前一天。例如：

$scope.minDate = new Date(
                    $scope.mymindate
                );

$scope.minDate returns Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) 我查了原因 returns 3 月 30 日而不是 4 月 1 日，这似乎是时区错误？

我想将 mymindate 设置为“2016-04-01”并获取 mymaxdate =“2016-05-31”并禁用此范围之外的所有日期。我已阅读 Beginners Guide to Javascript Date and Time 并在此处试用。

在我的控制器中：

$scope.mymindate = '2016-04-01';
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31'

 $scope.minDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth(), 1);

 $scope.maxDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth() + 1, 0);

在我的模板中：

    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>

Answer 1

您需要为 input 设置 datepicker-options 和适当的 option 以禁用日期。在您的示例中使用 datepicker-options="dateOptions" 但在您的控制器中未声明 [=17=].

因此您需要为 maxDate 和 minDate 设置 dateOptions。喜欢

$scope.dateOptions = {
    maxDate: new Date($scope.maxDate),
    minDate: new Date($scope.mymindate)
};

并设置 maxDate 和 minDate 如：

$scope.mymindate = new Date('2016-04-01');
$scope.mymaxmonth = new Date('2016-05-01'); //wanted mymaxdate to be '2016-05-31'

$scope.minDate = new Date($scope.mymindate);

$scope.maxDate = new Date($scope.mymaxmonth.getFullYear(),$scope.mymaxmonth.getMonth()+1,0);

和HTML：

<p class="input-group">
    <input  type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
    <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

可以看到Plunker Demo希望对你有帮助:)

Answer 2

经过一些烦人的日期操作后，我明白了。这是工作的plunker： http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

在我的控制器中我有：

var mindate = new Date($scope.mymindate);
$scope.minDate = new Date(mindate.getTime()+(1*24*60*60*1000)); //Due to poor design by the authors of ECMA-262 the date is parsed to be a day behind, so we must add a day

var maxdate = new Date($scope.mymaxmonth);
$scope.maxDate = new Date(maxdate.getFullYear(), maxdate.getMonth() + 2, 0); //Add a month to get to the end of the month.

$scope.dateOptions = {
    maxDate: $scope.maxDate,
    minDate: $scope.minDate,
};

在我的模板中：

datepicker-options="dateOptions"

我最终不需要最小日期或最大日期，因为日期选项涵盖了两者。老实说，我不确定为什么你必须在 macdate.getMonth() 中添加两个而不是一个，但它成功了。

AngularUI Datepicker 禁用超出范围的日期

AngularUI Datepicker disable dates outside of range

javascript

date

datepicker

angularjs

angularjs-controller