0

How do I fix the uib-datepicker to just one year. (say current year only).

I tried searching but all that I could find was to restrict calendar to year mode only. I tried setting year:2016 in datepicker-options but it didn't work.

Any suggestions ???

Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82

1 Answers1

0

You can to use minDate and maxDate properties in the datepicker-options object as described in the docs.

The following code shows a datepicker limited to the current year:

angular.module('MyApp',['ui.bootstrap']).controller('AppCtrl', function($scope) {
  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };
  
  $scope.dateOptions = {
    minDate: moment().startOf('year').toDate(),
    maxDate: moment().endOf('year').toDate()
  };
  
  $scope.format = 'dd-MMMM-yyyy';

  $scope.popup1 = {
    opened: false
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-touch.min.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="MyApp" ng-controller="AppCtrl">
  <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="popup1.opened" datepicker-options="dateOptions" show-button-bar="false" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
      </p>
    </div>
  </div>
</div>

Note that I used moment startOf, endOf and toDate to get the first and the last days of the current year as Date objects.

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • I already got this..But this is not helpful as I have to restrict date again based on my specific conditions for different rows in a table. FOr example your code enables the entire year. I want entire year should be visible but certain months in past should be non-selectable – Saurabh Tiwari Oct 13 '16 at 05:24
  • @SaurabhTiwari sorry but you never mentionted these conditions in your original question, how can an answer satify them? The problem is that what you are asking is not what you need. I suggest to edit your question (or ask a new one) specifying the additional conditions. – VincenzoC Oct 13 '16 at 07:59