Question

我想将Angular UI Datepicker限制在作为变量传入的两个日期之间。我希望在不添加像momentjs这样的库的情况下让它工作，因为这是我需要处理日期的唯一字段。

以下是此问题的一个问题：

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()运行它会返回给定日期前一天的日期。例如：

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

$ scope.minDate返回Wed Mar 30 2016 17:00:00 GMT-0700 (PDT)我查看了为什么它返回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

您需要为datepicker-options设置option input来禁用日期。在您使用datepicker-options="dateOptions"的示例中，但在您的控制器中未声明dateOptions。

因此，您需要为dateOptions和maxDate设置minDate。像

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

我最终不需要min-date或max-date，因为dateoptions涵盖了两者。我会说实话，不知道为什么你必须在macdate.getMonth（）中添加两个而不只是一个，但它确实有效。

AngularUI Datepicker禁用范围之外的日期

2 个答案: