Angular boostrap datetimepicker kann vergangene Daten nicht deaktivieren

Question

Ich versuche, alle vergangenen Daten von einem eckigen Boostrap datetimepicker zu deaktivieren. Ich fand, dass ich das Datum deaktiviert verwenden sollte, aber ehrlich, ich verstehe es nicht und es funktioniert auch nicht.

<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); 
}; 

Wie kann ich es so machen, dass es mich nicht vergangene Daten auswählen lässt?

Dies ist, was ich https://www.npmjs.com/package/angular-ui-bootstrap-datetimepicker

Mein aktuellen Code verwenden, funktionierte nicht: plnkr.co/edit/VGTFJaVN6Y62Frmt3ksB?p=preview

andere Ideen, wie al lthe machen Daten in der Vergangenheit heraus zu bekommen grau/kann nicht ausgewählt werden>?

Ich habe alles versucht. Irgendwelche Ideen, was ich hier falsch mache?

Answer 1

Nun können Sie den folgenden Code verwenden, um vergangene Daten zu deaktivieren, indem Sie das min date scope-Objekt in Ihrem JS festlegen.

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

Ihre HTML-ähnliche

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

Im Fall von Winkel-ui-Bootstrap-Datetime aussehen wird, können Sie es tun, indem Sie in Ihrem Js Datum Optionen min Datum im folgenden Art und Weise einstellen

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

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

in Ihrem HTML

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

Answer 2

Wenn Sie Daten basierend auf der Auswahl dynamisch deaktivieren möchten, können Sie die Attribute min und max sowie die Beobachter verwenden.

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

setzen nur

Attribut in html

date-options="dateOptions" 

Update Ihre HTML zu

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

und

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

hier unten Code in js setzen Plunker davon.

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