2016-04-15 15 views
0

Ich möchte die Angular UI Datepicker zwischen zwei Daten als Variablen übergeben beschränken. Hier ist ein Arbeits Plunker dieses Problem: http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=previewAngularUI Datepicker übergibt Variablen an MinDate und MaxDate

hier sind die Variablen:

mycurrentdate = '2016-04-15' 
mymindate = '2016-04-01' 
mymaxmonth = '2016-05-01' 

Mein tatsächlicher max Datum das Ende der mymaxmonth sein wird, so in diesem Fall: ‚2016.05.31‘

$scope.maxDate = new Date(
        $scope.mymaxmonth + (TO THE END OF THE MONTH) 
       ); 

eine Sache zu beachten ist, dass es durch new Date() gibt ein Datum ausgeführt wird, der am Tag vor dem angegebenen Datum ist. Zum Beispiel:

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

wo $ scope.minDate Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) zurück sah ich den Grund auf, warum es gibt 30. März statt 1. April und es scheint wie eine Zeitzone Fehler entdeckt?

Ich möchte ein mymindate von ‚2016.04.01‘ setzen und mymaxdate = ‚2016.05.31‘ erhalten und alle Termine außerhalb dieses Bereichs deaktivieren. Ich bin besonders darauf aus, herauszufinden, wie ich zum Ende des Monats komme. Gibt es in JavaScript eine endmonth() Funktion?

Im Controller habe ich:

$scope.mymindate = '2016-04-01'; 
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31' 

$scope.minDate = new Date(
    $scope.mymindate 
); 
$scope.maxDate = new Date(
    $scope.mymaxmonth + 1 
); 

In der Vorlage habe ich:

<p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 

Antwort

0

Die Beispiele in Ihrem Plunkr wird nicht so funktionieren sie geschrieben sind.

Ich würde vorschlagen, Sie beginnen mit einigen reading auf, wie man Javascript-Daten mit Vanille Javascript richtig bearbeitet.

Sobald Sie wissen, was und wie Sie wollen manipulieren (in diesem Fall Monat), würde ich eine Bibliothek vorschlagen, dass es leicht für Sie tun können, wie MomentJS.

Moment ermöglicht es Ihnen, ein beliebiges Datum zu nehmen und Ihnen zu erlauben, es in fast jeder Weise zu manipulieren, einschließlich Hinzufügen, Ende des Monats und lokal (Zeitzonen-Korrektur).

Wickeln Sie ein beliebiges Datum in eine moment() und beziehen Sie sich auf die MomentJS-Dokumentation, um zu tun, was Sie wollen. Sie müssen die Daten immer noch in eine new Date() umwandeln, damit sie im Angular UI Datepicker funktioniert.

new Date(moment($scope.mymaxmonth).add(1,'months')); //Fri Jun 1 2016 16:41:02 GMT-0700 (Pacific Daylight Time) 
new Date(moment($scope.mymaxmonth).endOf('month')); // Tue May 31 2016 23:59:59 GMT-0700 (Pacific Daylight Time) 
new Date(moment($scope.mymindate).local()); //Fri Apr 01 2016 00:00:00 GMT-0700 (Pacific Daylight Time) 

Here und here gibt ein paar Möglichkeiten, wie Sie zur Zeit in Ihre Angular App integrieren.

Verwandte Themen