Angular bootstrap datetimepicker 无法禁用过去的日期

Question

我正在尝试从 angular boostrap 日期时间选择器中禁用所有过去的日期。我发现为了做到这一点，我应该使用 date-disabled 但老实说，我不明白它也不起作用。

<datetimepicker class="calendar-format"
                data-ng-model="data.date"
                date-disabled="isDisabledDate(date, mode)"></datetimepicker>

this.isDisabledDate = function(currentDate, mode) {
  return mode === 'day' &&
    (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};

我怎样才能让它不让我选择过去的日期？

这就是我正在使用的https://www.npmjs.com/package/angular-ui-bootstrap-datetimepicker

我当前的代码不起作用：plnkr.co/edit/VGTFJaVN6Y62Frmt3ksB?p=preview

还有其他想法如何使所有过去的日期变灰/无法选择>？

我什么都试过了。有什么想法我在这里做错了吗？

Answer 1

您可以使用下面的代码通过在您的 JS 中设置最小日期范围对象来禁用过去的日期。

$scope.dateOptions = {
            formatYear: 'yyyy',
            startingDay: 1
    };
 $scope.opened = true;
 $scope.minDate=  new Date();//today and future dates will be enabled..
  var maxDate = new Date();
  maxDate.setFullYear (maxDate.getFullYear() + 2);//enable for 2 future years.. 
 $scope.maxDate= maxDate;

您的 HTML 将如下所示

<input type="text" class="form-control selection-box"
                                id="datepicker" 
                                datepicker-popup="{{dateFormat}}"
                                ng-model="selectedDate" is-open="opened"
                                min-date="minDate" max-date="maxDate"
                                datepicker-options="dateOptions" readonly="readonly"
                                ng-change="changeDate()"
                                close-text="Close" ng-required="true" /> 

在 angular-ui-bootstrap-datetimepicker 的情况下，您可以通过在您的 Js 中按以下方式在日期选项中设置最小日期来做到这一点

$scope.dateOptions = {
    showWeeks: false,
    startingDay: 0
  };

    var minDate = new Date();
    minDate.setDate(minDate.getDate());
    $scope.dateOptions.minDate = minDate;

在你的 HTML 中

<datetimepicker class="calendar-format" date-options="dateOptions" data-ng-model="data.date" date-disabled="isDisabledDate(date, mode)"></datetimepicker>

Answer 2

随便放

html 中的属性

date-options="dateOptions"

将您的 html 更新为

<datetimepicker class="calendar-format" data-ng-model="data.date" date-disabled="isDisabledDate(date, mode)" date-options="dateOptions"></datetimepicker>

把下面的代码放到js里

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

这就是它的笨拙。

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

Answer 3

如果您想根据选择动态禁用日期，您可以使用 min 和 max 属性以及观察者。

JS

$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime

function startDateOnSetTime () {
  $scope.$broadcast('start-date-changed');
}

function endDateOnSetTime () {
  $scope.$broadcast('end-date-changed');
}

function startDateBeforeRender ($dates) {
  if ($scope.dateRangeEnd) {
    var activeDate = moment($scope.dateRangeEnd);

    $dates.filter(function (date) {
      return date.localDateValue() >= activeDate.valueOf()
    }).forEach(function (date) {
      date.selectable = false;
    })
  }
}

function endDateBeforeRender ($view, $dates) {
  if ($scope.dateRangeStart) {
    var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');

    $dates.filter(function (date) {
      return date.localDateValue() <= activeDate.valueOf()
    }).forEach(function (date) {
      date.selectable = false;
    })
  }
}

HTML

     <div class="dropdown form-group">
    <label>Start Date</label>
    <a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
       href="#">
        <div class="input-group date">
            <input type="text" class="form-control" data-ng-model="dateRangeStart">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker data-ng-model="dateRangeStart"
                        data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }"
                        data-on-set-time="startDateOnSetTime()"
                        data-before-render="startDateBeforeRender($dates)"></datetimepicker>
    </ul>
</div>

<div class="dropdown form-group">
    <label>End Date</label>
    <a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
       href="#">
        <div class="input-group date">
            <input type="text" class="form-control" data-ng-model="dateRangeEnd">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker data-ng-model="dateRangeEnd"
                        data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed' }"
                        data-on-set-time="endDateOnSetTime()"
                        data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
    </ul>
</div>