Выбор месяца и года на одной странице. angularjs

0

На моей странице я хочу иметь два выпадающих меню. Одним из них является выпадающее меню Yearonly, а другое - выпадающее меню MonthYear.

У меня есть два отдельных плунжера, которые отлично подходят для Picker Yearyear и Year picker. Они заключаются в следующем:

Месяц выбора года: 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

Теги:

1 ответ

1
Лучший ответ

Я предполагаю, что вы хотите, чтобы два сборщика могли одновременно проводить разные даты (не меняя другого, когда один из них изменен). Для этого вам нужно будет назначить два входа разных моделей (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>
  • 0
    большое спасибо. еще одна вещь, которую я пытался отключить определенные месяцы в этом выпадающем списке. Я добавил> var monthsToDisable = [4,5,9]; $ scope.disableMonth = function (date) {var day = date.getMonth (); if ($ .inArray (month, monthsToDisable)! = -1) {return [false]; } return [true]; } в файле js и на html-странице ng-click = "open ($ event); disableMonth (date)", но отключение не работает. Что я делаю неправильно ?
  • 0
    Эта функция возвращает массив с 1 логическим значением ... Если вы поместите ее в ng-click, я не ожидаю, что она сделает что-нибудь полезное (она будет вызвана после нажатия этой кнопки и возврата массива - по сути, ничего не делая ценность насколько я понимаю). Возможно, поиграйте еще немного с кодом плункера для 'Datepicker Popup' здесь . У вас есть пример того, как использовать dateDisabled там.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню