我想将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)
);
需要注意的一点是,通过新的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,希望它会帮助你:)