AngularJS UI-Bootstrap，如何将 minDate 设置为 90 天前，将 maxDate 设置为今天？答案

【问题标题】：AngularJS UI-Bootstrap, How to set minDate to 90 days ago and maxDate to today?AngularJS UI-Bootstrap，如何将 minDate 设置为 90 天前，将 maxDate 设置为今天？
【发布时间】：2014-08-21 19:27:29
【问题描述】：

我有一个使用 AngularJS 和 UI-Bootstrap 的应用程序。我有一个需要限制日期的 datePicker。我对角度很陌生，想知道是否有人知道我会如何做到这一点。我正在寻找一种方法将 minDate 设置为 90 天前，将 maxDate 设置为今天的日期。

my plunker

var DatepickerDemoCtrl = function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );

  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();



       $scope.open = function($event,opened) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope[opened] = true;
  };


  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.initDate = new Date('2016-15-20');
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
};

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

差不多了。需要更改您的 minDate 变量：

var date = new Date();
$scope.minDate = date.setDate((new Date()).getDate() - 90);

然后将您的input 的min 指令更改为min-date 并添加一个max-date 以设置为您的dt 变量：

<input type="text" datepicker-popup="dd-MMMM-yyyy" 
    ng-model="dt1" is-open="opened1" min-date="minDate" max-date="dt"
    datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
    ng-required="true"/>

这是forked plunker

【讨论】：

如何将 minDate 设置为本月的第一天....我试过这个 $scope.minDate = new Date($scope.dt.getYear(),$scope.dt.getMonth() ,1); dt 具有当前日期对象。

【解决方案2】：

min-date 和 max-date 禁用超出日期选择器弹出窗口范围的日期！但它不会验证用户是否可以直接在输入字段中输入日期！如果用户手动输入日期，为了验证给定的日期，我将 ui.validate 用作另一个菜鸟：

包含依赖 => ['ui.validate']

在html中添加属性“ui-validate”

 <input type="text" name="dob" show-button-bar="false"
                       class="tw-formControl"  uib-datepicker-popup="MM/dd/yyyy"
                       ng-model="vm.profile.attributes.dob" ui-validate="{outOfBounds : 'vm.checkDateLimits($value)' }" is-open="vm.calanderToggle" placeholder="mm/dd/yyyy"
                       datepicker-options="dateOptions"/>

验证：

 <div class="tw-customValidation" ng-messages="profileForm.dob.$error"
               ng-if="profileForm.dob.$dirty || profileForm.$submitted">
            <div ng-message="date">Please enter a valid date</div>
            <div ng-message="outOfBounds"> Date selected is out of range. </div>
          </div>

在控制器中：

  vm.checkDateLimits = function(selectedDate){
    var currentDate = new Date(selectedDate);
    var upperBounds = new Date();
    var lowerBounds = new Date('01/01/1900'); //replace lower bound with your 90 days logic

return currentDate < upperBounds && currentDate > lowerBounds;

}

ui.validate 的文档可以在这里找到here

【讨论】：