Monat und Jahr Pflücker auf einer Seite. angularjs

In meiner Seite möchte ich zwei Dropdowns haben. Eines ist das Dropdown-Menü "Nur Jahr" und das andere ist das Dropdown-Menü "Monat".Monat und Jahr Pflücker auf einer Seite. angularjs

Ich habe zwei separate Plunker, die gut für Monatsauswahl und Jahresauswahl funktioniert. Sie sind wie folgt:

Monat Jahr Picker: Plunker

$scope.dateOptions = { 
    formatYear: 'yyyy', 
    startingDay: 1, 
    minMode: 'month' 
    }; 

    $scope.formats = ['MM/yyyy']; 
    $scope.format = $scope.formats[0];

Jahr Picker: Plunker

$scope.dateOptions = { 
    formatYear: 'yyyy', 
    startingDay: 1, 
    minMode: 'year' 
    }; 

    $scope.formats = ['yyyy']; 
    $scope.format = $scope.formats[0];

Das Problem, das ich bin vor beide auf der gleichen Seite haben.

Pickers auf derselben Seite: plunker

Quelle

2016-07-29 r mk r

Ich gehe davon aus Sie die beiden Pflücker der Lage sein, verschiedene Termine zur gleichen Zeit zu halten (nicht auf die anderen ändern, wenn einer von ihnen geändert wird). Dazu müssen Sie den beiden Eingängen verschiedene Modelle zuweisen (ng-model = "dt" und ng-model = "dtYr").

Auch die Funktion, die Sie für die zweite Schaltfläche aufrufen, ist openYR. Sie haben keine solche Funktion in Ihrem Skript definiert (Sie haben jedoch openYr definiert). Aus diesem Grund passiert nichts, wenn Sie auf die zweite Schaltfläche klicken.

Die open- und openYr-Funktionen (die für das Öffnen dieses Auswahlmenüs zuständig sind) ändern dieselbe Variable, die beiden 'is-open'-Attributen zugewiesen ist. Da er beiden 'is-open'-Attributen zugewiesen ist, sehen Sie beide Auswahlmenüs geöffnet, wenn Sie auf die erste Schaltfläche klicken. Sie brauchen also openYr, um eine andere Variable zu ändern, die dann dem Jahreswähler 'is-open' zugewiesen wird.

Hier ist die Arbeitsversion: Plunker

script.js

angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', 
function ($scope) { 
    $scope.today function() { 
     $scope.dt new Date(); 
     //CHANGE 
     $scope.dtYr new Date(); 
     //CHANGEEND 
    }; 
    $scope.today(); 
    $scope.clear function() { 
     $scope.dt null; 
    }; 
    $scope.open function($event) { 
     $scope.status.opened true; 
    }; 
    //CHANGE 
    $scope.openYr function($event) { 
     $scope.status.openedYr true; 
    }; 
    //CHANGEEND 
    $scope.dateOptions { 
     formatYear: 'yyyy', startingDay: 1, minMode: 'month' 
    }; 
    $scope.dateOptionsYr { 
     formatYear: 'yyyy', startingDay: 1, minMode: 'year' 
    }; 
    $scope.formats ['MM/yyyy']; 
    $scope.format $scope.formats[0]; 
    $scope.formatsYr ['yyyy']; 
    $scope.formatYr $scope.formatsYr[0]; 
    $scope.status { 
     opened: false, //CHANGE 
     openedYr: false //CHANGEEND 
    }; 
} 
);

index.html

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.1.js"></script> 
    <script src="script.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/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"> 
     <hr /> 
     <div class="row"> 
      <div class="col-md-6"> 
       <p class="input-group"> 
        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
        <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
        </span> 
       </p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <p class="input-group"> 
        <input type="text" class="form-control" uib-datepicker-popup="{{formatYr}}" ng-model="dtYr" is-open="status.openedYr" datepicker-options="dateOptionsYr" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
        <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="openYr($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
        </span> 
       </p> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

Quelle

2016-07-29 22:44:44 Claudiu

u sehr viel danken. Eine weitere Sache, die ich versuchte, bestimmte Monate in diesem Dropdown zu deaktivieren. Ich habe> var monatesToDisable = [4,5,9]; $ scope.disableMonth = Funktion (Datum) { var day = date.getMonth(); if ($ .inArray (month, monatesToDisable)! = -1) { return [false]; } zurück [wahr]; } in der js-Datei und in der HTML-Seite ng-click = "open ($ event); disableMonth (date)" aber die Deaktivierung funktioniert nicht. Was mache ich falsch ? –

Diese Funktion gibt ein Array von 1 boolean zurück ... Wenn Sie es in ng-click einfügen, würde ich nicht erwarten, dass es etwas nützliches tut (es wird aufgerufen, nachdem Sie auf diese Schaltfläche klicken und das Array zurückgeben - im Wesentlichen nichts tun von Wert, soweit ich es verstehe). Vielleicht spiele ich noch ein wenig mit dem Plunker-Code für 'Datepicker Popup' [hier] (https://angular-ui.github.io/bootstrap/). Sie haben ein Beispiel dafür, wie Sie dateDisabled dort verwenden können. – Claudiu

Monat und Jahr Pflücker auf einer Seite. angularjs

Antwort

Verwandte Themen