Question

在我的页面中，我希望有两个下拉列表。一个是Yearonly picker下拉，另一个是MonthYear picker下拉。

我有两个独立的掠夺者，适合Monthyear选择器和年份选择器。它们如下：

月份选择器：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

Answer 1

我假设您希望两个选择器能够同时保存不同的日期（当其中一个更改时，不会更改另一个日期）。为此，您需要为两个输入分配不同的模型（ng-model =＆＃34; dt＆＃34;和ng-model =＆＃34; dtYr＆＃34;）。

此外，您要求第二个按钮的功能是openYR。您的脚本中没有定义此类函数（但您确实已定义了openYr）。这就是单击第二个按钮时没有任何反应的原因。

open和openYr函数（负责打开该选择菜单）更改分配给＆＃39; is-open＆＃39;属性。因为它被分配给'开放'和＃39;属性，当您单击第一个按钮时，您会看到两个选择菜单都打开。因此，您需要openYr来更改另一个变量，然后将该变量分配给年份选择器＆＃39; is-open＆＃39;。

以下是工作版本：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>

一年中的月份和年份选择器。 angularjs

1 个答案: