r mk r r mk r - 4 months ago 35
AngularJS Question

month and year pickers in one page. angularjs

In my page I want to have two dropdowns. One is Yearonly picker dropdown and the other is MonthYear picker dropdown.

I have two separate plunkers which works fine for Monthyear picker and Year picker. They are as follows :

Month year picker : Plunker

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

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


Year picker : Plunker

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

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


The problem I am facing is to have both on the same page.

Pickers on same page : plunker

Answer

I'm assuming you want the two pickers to be able to hold different dates at the same time (not change the other when one of them is changed). To do this, you will need to assign the two inputs different models (ng-model="dt" and ng-model="dtYr").

Also, the function you are calling for the second button is openYR. You have no such function defined in your script (you do have openYr defined though). This is why nothing happens when you click the second button.

The open and openYr functions (responsible for opening that selection menu) change the same variable which is assigned to both 'is-open' attributes. Because it is assigned to both 'is-open' attributes, you see both selection menus open when you click the first button. You thus need openYr to change a different variable that will then be assigned to the year-picker 'is-open'.

Here is the working version: 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>