6

At the moment, I can first select the year, then the month, and then, the date. However, I only need access to month and the year. I'm not sure how to disable the date-selector option.

Also, I would like to get rid of all the footer buttons (today, clear, etc) in the date-picker as well. How can I achieve this ?

I'm looking for something similar to '$scope.showweeks = false;'

Below is my Plunker example

Plunker- Month year picker

Please feel free to direct me to any documentations available. So far, I could only find

http://angular-ui.github.io/bootstrap/

Thanks

Ren
  • 1,493
  • 6
  • 31
  • 56
  • Can you check these url :http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=2&minViewMode=1&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox – JQuery Guru Mar 11 '14 at 10:49
  • I don't think you can do that because datepicker supports only `show-weeks` attribute. I would write some directive that will add `ng-show` to relevant tag – Maxim Shoustin Mar 11 '14 at 11:05
  • @JQueryGuru - Thanks. It works well. But is there a way to access the same properties ( minViewMode: 1) using angular ? – Ren Mar 11 '14 at 11:08
  • @MaximShoustin - Is it possible to do it in a simpler way as in the bootstrap datepicker ? Would I be able to use the date-disabled (date, mode) function to disable the date selector? I tried playing around with it, but couldn't get it to work. – Ren Mar 11 '14 at 11:11
  • There is a project for ui bootstrap that's a fork of the bootstrap-datepicker project: https://github.com/dalelotts/angular-bootstrap-datetimepicker – holgac Jun 26 '14 at 23:01

2 Answers2

9

You can try to use datepicker for Bootstrap with jQuery wrapped by directive.

See Plunker

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.var1 = '07-2013';
});


app.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({
           format: "MM-yyyy",
           viewMode: "months", 
            minViewMode: "months",
              pickTime: false,
          }).on('changeDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});

HTML

   <div id="date" class="input-append" datetimez ng-model="var1">
      <input data-format="MM-yyyy" type="text" id="input1" name="input1"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>

enter image description here

Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • Thanks...!! I was just working on that after finding a similar post. It works well, except that I can't close it unless I click anywhere else on the screen. Is there an api for close button ? or may be double-click on a month to set it and close the pop-up ? – Ren Mar 11 '14 at 12:49
  • Which Browser do you use? – Maxim Shoustin Mar 11 '14 at 12:51
  • chrome at the moment, but need to support ie-9 if not 8. – Ren Mar 11 '14 at 12:52
  • you can grab sources from link `JQuery Guru` posted and add directive from my example. After, set option: `autoclose: true`. Hope it should work – Maxim Shoustin Mar 11 '14 at 13:05
-1

You can set mode in setting. For example for supporting only years, options would look like that:

    $scope.optionsYear = {
      showWeeks: false,
      minMode: 'year',
    };

And add options to datepicker:

data-datepicker-options="optionsYear"
user1403588
  • 709
  • 1
  • 6
  • 18