。 angularjs

在我的頁面我想要兩個下拉菜單。一個是Yearonly選擇器下拉菜單，另一個是MonthYear選擇器下拉菜單。。 angularjs

我有兩個單獨的重擊機，適用於Monthyear選取器和Year選取器。它們分別是：

月年選擇器：Plunker

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

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

年選擇器：Plunker

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

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

我面臨的問題是同時擁有在同一頁上。

拾荒者同一頁上：plunker

來源

2016-07-29 r mk r

我假設你希望兩個撿拾者能在同一時間舉行不同的時間（當他們中的一個改變不能改變的除外）。爲此，您需要分配兩個輸入不同的模型（ng-model =「dt」和ng-model =「dtYr」）。

此外，您要求第二個按鈕的函數是openYR。您的腳本中沒有定義這樣的函數（您確實已經定義了openYr）。這就是爲什麼當你點擊第二個按鈕時沒有任何反應。

open和openYr函數（負責打開該選擇菜單）更改分配給「is-open」屬性的相同變量。因爲它被分配到'is-open'屬性，所以當你點擊第一個按鈕時，你會看到兩個選擇菜單打開。因此，您需要openYr來更改一個不同的變量，然後將其分配給year-picker'is-open'。

這裏的工作版本：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>

來源

2016-07-29 22:44:44 Claudiu

感謝ü非常多。還有一件事我試圖在這個下拉列表中禁用某些月份。我添加了> var monthsToDisable = [4,5,9]; $ scope.disableMonth = function（date）{ var day = date.getMonth（）; （$ .inArray（month，monthsToDisable）！= -1）{ return [false]; } return [true]; }在js文件和html頁面ng-click =「open（$ event）; disableMonth（date）」但禁用不起作用。我究竟做錯了什麼？ –

該函數返回1個布爾數組的數組...如果將它放在ng-click中，我不會指望它做任何有用的事情（它會在您單擊該按鈕並返回數組後調用 - 實質上什麼也不做據我所知，它的價值）。也許更多地使用'Datepicker Popup'[here]（https://angular-ui.github.io/bootstrap/）的plunker代碼。你有一個如何在那裏使用dateDisabled的例子。 – Claudiu

回答

相關問題