。 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

回答

相关问题