title: year and month only datepicker angularjs and bootstrap
body: <p>i have problem i want to use datepicker from date to date(check in and check out with months not days) and it should be with months ,the problem is: i have template but it show me the the day and the year and the month , what i want is just month and year </p>
  
  <p>this what i get and i want just months and year 
  <a href="https://i.stack.imgur.com/XlQMq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlQMq.png" alt="enter image description here"></a></p>
  
  <p><a href="http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview</a></p>
  
  <p>html :</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="DatepickerDemoCtrl"&gt;
      &lt;h4&gt;Start&lt;/h4&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;p&gt;
              &lt;input type="text" datepicker-popup="{{format}}" ng-model="start" is-open="startOpened" min="minStartDate" max="maxStartDate" datepicker-options="dateOptions" close-text="Close" /&gt;
              &lt;button class="btn" ng-click="openStart()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;h4&gt;End&lt;/h4&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;p&gt;
              &lt;input type="text" datepicker-popup="{{format}}" ng-model="end" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" /&gt;
              &lt;button class="btn" ng-click="openEnd()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js :</p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap']);
  var DatepickerDemoCtrl = function ($scope, $timeout) {
    $scope.start = new Date('11/20/13');
    $scope.end = new Date();
  
    $scope.minStartDate = 0; //fixed date
    $scope.maxStartDate = $scope.end; //init value
    $scope.minEndDate = $scope.start; //init value
    $scope.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value
  
    $scope.$watch('start', function(v){
      $scope.minEndDate = v;
    });
    $scope.$watch('end', function(v){
      $scope.maxStartDate = v;
    });
  
    $scope.openStart = function() {
      $timeout(function() {
        $scope.startOpened = true;
      });
    };
  
    $scope.openEnd = function() {
      $timeout(function() {
        $scope.endOpened = true;
      });
    };
  
    $scope.dateOptions = {
      'year-format': "'yy'",
      'starting-day': 1
    };
  };
  </code></pre>
  
  <p>Thanks in Advance</p>