На моей странице я хочу иметь два выпадающих меню. Одним из них является выпадающее меню Yearonly, а другое - выпадающее меню MonthYear.
У меня есть два отдельных плунжера, которые отлично подходят для Picker Yearyear и Year picker. Они заключаются в следующем:
Месяц выбора года: Plunker
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1,
minMode: 'month'
};
$scope.formats = ['MM/yyyy'];
$scope.format = $scope.formats[0];
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1,
minMode: 'year'
};
$scope.formats = ['yyyy'];
$scope.format = $scope.formats[0];
Проблема, с которой я столкнулся, состоит в том, чтобы иметь как на одной странице.
Сборщики на одной странице: plunker
Я предполагаю, что вы хотите, чтобы два сборщика могли одновременно проводить разные даты (не меняя другого, когда один из них изменен). Для этого вам нужно будет назначить два входа разных моделей (ng-model = "dt" и ng-model = "dtYr").
Кроме того, функция, которую вы вызываете для второй кнопки, - openYR. У вас нет такой функции, определенной в вашем скрипте (у вас есть openYr, определенный). Вот почему ничего не происходит, когда вы нажимаете вторую кнопку.
Функции open и openYr (отвечающие за открытие этого меню выбора) изменяют ту же переменную, которая назначается атрибутам "is-open". Поскольку он присваивается атрибутам "is-open", вы видите, что оба меню выбора открываются при нажатии первой кнопки. Таким образом, вам нужно openYr, чтобы изменить другую переменную, которая затем будет назначена на год-сборщик "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>