角度助推器datetimepicker不能禁用過去的日期

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

任何其他的想法如何使人lthe過去的日期得到變灰/無法挑選>？

我嘗試了一切。任何想法我在這裏做錯了嗎？

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

在角UI的自舉的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

如果您想根據選擇動態禁用日期，則可以使用最小和最大屬性以及觀察者。

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> 

Answer 3

只是把

屬性在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(); 

這裏把下面的代碼是它plunker。

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