Question

我正在尝试从角度boostrap datetimepicker禁用其过去的日期。我发现，为了做到这一点，我应该使用日期禁用，但老实说，我不理解它，它也不起作用。

<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

任何其他想法如何使过去的日期变得灰暗/无法被选中＆gt;？

我尝试了一切。我在这里做错了什么想法？

Answer 1

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

keytool -import -alias test.com -file ../test.cer -keystore ../lib/security/cacerts

您的HTML将如下所示

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

在angular-ui-bootstrap-datetimepicker的情况下，你可以通过在Js中以下面的方式设置日期选项来实现它

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

在您的HTML中

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

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

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>

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

3 个答案: