Angular UI Datepicker. Aktivieren Sie nur 5 Tage ab heute ohne Wochenenden

Ich verwende Angular UI Bootstrap Datepicker Direktive in meinem Projekt. Ich habe diese spezifische Notwendigkeit, wie ich nur 5 Tage vom aktuellen Tag aktivieren muss. Im Falle eines Wochenendes muss ich sie deaktivieren und die verbleibenden Tage aktivieren. Wenn zB der aktuelle Tag am Freitag ist, muss ich fri, mon, tue, web, thurs aktivieren. Ich verwende die dateDisabled-Eigenschaft, um dies zu erreichen. Problem ist, dass alle vergangenen Monatstermine ebenfalls aktiviert werden. Ich denke auch, dass die Lösung, die ich gefunden habe, nicht elegant ist. Unten ist mein Markup und Code. Bitte hilf mir. Vielen Dank im Voraus.Angular UI Datepicker. Aktivieren Sie nur 5 Tage ab heute ohne Wochenenden

<input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/> 

vm.dateOptions = { 
    dateDisabled: disabled, 
    minDate: today    
}; 

function disabled(data) { 
     var date = data.date, 
      mode = data.mode; 
     if (today.getDay() === 0 || today.getDay() === 6) { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5); 
     }else if (today.getDay() === 1) { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4); 
     }else { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6); 
     } 
}

Quelle

2016-05-23 logesh

Was Sie suchen sind die min-date, max-date und date-disabled Attribute, as described in the docs. Die date-disabled Funktion in diesem Beispiel gezogen wird direkt von den Dokumenten, und um den verfügbaren Datumsbereich, geben Sie einfach das min-date Attribut auf die aktuelle Datumzeit zu beschränken:

vm.dt = new Date(); 
vm.minDate = angular.copy(vm.dt);

... und die max-date bis fünf Tage aus jetzt:

var fiveDaysFromNow = angular.copy(vm.dt); 
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5); 
vm.maxDate = fiveDaysFromNow;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
 
    
 
    var vm = this; 
 
    
 
    function today() { 
 
    vm.dt = new Date(); 
 
    } 
 
    
 
    today(); 
 
    
 
    vm.opened = false; 
 

 
    vm.openDatePopup = function() { 
 
    vm.opened = true; 
 
    }; 
 

 
    // Disable weekend selection 
 
    vm.disabled = function(date, mode) { 
 
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 
 
    }; 
 
    
 
    vm.minDate = angular.copy(vm.dt); 
 
    
 
    var fiveWeekdaysFromNow = angular.copy(vm.dt); 
 
    fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7); 
 
    vm.maxDate = fiveWeekdaysFromNow; 
 

 
    vm.dateOptions = { 
 
    formatYear: 'yy', 
 
    startingDay: 0 
 
    }; 
 

 
    vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
 
    vm.format = vm.formats[0]; 
 

 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <style> 
 
     .full button span { 
 
     background-color: limegreen; 
 
     border-radius: 32px; 
 
     color: black; 
 
     } 
 
     .partially button span { 
 
     background-color: orange; 
 
     border-radius: 32px; 
 
     color: black; 
 
     } 
 
    </style> 
 
    <div ng-controller="DatepickerDemoCtrl as demo"> 
 
     <div class="row"> 
 
     <div class="col-xs-8 col-xs-offset-2"> 
 
      <p class="input-group"> 
 
      <input type="text" 
 
        class="form-control" 
 
        uib-datepicker-popup="{{demo.format}}" 
 
        ng-model="demo.dt" 
 
        show-weeks="false" 
 
        is-open="demo.opened" 
 
        min-date="demo.minDate" 
 
        max-date="demo.maxDate" 
 
        datepicker-options="demo.dateOptions" 
 
        date-disabled="demo.disabled(date, mode)" 
 
        ng-required="true" 
 
        close-text="Close"/> 
 
      <span class="input-group-btn"> 
 
       <button type="button" 
 
         class="btn btn-default" 
 
         ng-click="demo.openDatePopup()"> 
 
       <i class="glyphicon glyphicon-calendar"></i> 
 
       </button> 
 
      </span> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

hoffe, das hilft!

Quelle

2016-05-24 02:44:00

Hallo Danke für die Antwort. Dadurch werden die Wochenenden deaktiviert, aber auch gezählt. Aus diesem Grund habe ich die Bedingungen der if else festgelegt. – logesh

Wenn Sie nur fünf Wochentage im Voraus möchten, warum sollten Sie dann nicht einfach die Wochenenden deaktivieren und sieben statt fünf Tage hinzufügen (oder sechs hinzufügen, wenn Sie insgesamt fünf verfügbare Tage haben möchten, einschließlich heute). Egal an welchem Tag, Sie können nur die nächsten fünf Wochentage auswählen. Ich habe das Beispiel entsprechend aktualisiert. –

Angular UI Datepicker. Aktivieren Sie nur 5 Tage ab heute ohne Wochenenden

Antwort

Verwandte Themen