分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – AngularUI Datepicker禁用范围之外的日期，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

这是变量：

@H_972_8@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)
                );

需要注意的一点是,通过新的Date()运行它会返回一个日期,该日期是给定日期的前一天.例如：

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

$scope.minDate返回Wed Mar 30 2016 17:00:00 GMT-0700(PDT)我查看了为什么它返回3月30日而不是4月1日的原因,这似乎是时区错误？

我想设置一个’2016-04-01’的mymindate并获取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>

解决方法

你需要设置datepicker-options和适当的输入选项来禁用日期.在您的示例中使用了datepicker-options =“dateOptions”,但在您的控制器中没有声明dateOptions.

所以你需要为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,希望它会帮助你:)