AngularUI Datepicker 将变量传递给 minDate 和 maxDate答案

【问题标题】：AngularUI Datepicker passing variables to minDate and maxDateAngularUI Datepicker 将变量传递给 minDate 和 maxDate
【发布时间】：2016-04-15 22:35:52
【问题描述】：

我想将 Angular UI Datepicker 限制在作为变量传入的两个日期之间。这是解决此问题的有效方法：http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview

这里是变量：

mycurrentdate = '2016-04-15'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'

我的实际最大日期将是 mymaxmonth 的末尾，所以在这种情况下：'2016-05-31'

$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' 并禁用此范围之外的所有日期。我特别想弄清楚如何到月底。 javascript中有一些 endofmonth() 函数吗？

在我的控制器中：

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

$scope.minDate = new Date(
  $scope.mymindate
  );
$scope.maxDate = new Date(
  $scope.mymaxmonth + 1
  );

在我的模板中：

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

【问题讨论】：

标签： javascript angularjs date datepicker angular-ui-datepicker

【解决方案1】：

您的 Plunkr 中的示例不会按照它们编写的方式运行。

我建议您从reading 开始，了解如何使用 vanilla Javascript 正确操作 Javascript 日期。

一旦您知道要操作什么以及如何（在本例中为月份），我会建议一个可以轻松为您完成操作的库，例如 MomentJS。

Moment 将允许您获取任何日期并允许您以几乎任何方式对其进行操作，包括添加、月末和本地（时区修复）。

将任何日期包装在 moment() 中，并可以参考 MomentJS 文档来做你想做的事。您仍然需要将日期包装在 new Date() 中，以便它在 Angular UI Datepicker 中工作。

new Date(moment($scope.mymaxmonth).add(1,'months')); //Fri Jun 1 2016 16:41:02 GMT-0700 (Pacific Daylight Time)
new Date(moment($scope.mymaxmonth).endOf('month')); // Tue May 31 2016 23:59:59 GMT-0700 (Pacific Daylight Time)
new Date(moment($scope.mymindate).local()); //Fri Apr 01 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Here 和 here 是您可以将 moment 集成到 Angular 应用程序中的几种方式。

【讨论】：